@mmlogic/components 0.1.0 → 0.1.1

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

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

package/dist/cjs/loader.cjs.js

@@ -1,12 +1,12 @@
 'use strict';
 
-var index = require('./index-OvnIRO4Y.js');
+var index = require('./index-BPj2cBXs.js');
 var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["mrd-table.cjs",[[2,"mrd-table",{"columns":[16],"rows":[16],"locale":[1],"totalElements":[2,"total-elements"],"pageSize":[2,"page-size"],"rowHeight":[2,"row-height"],"tableHeight":[2,"table-height"],"defaultSort":[1,"default-sort"],"loadedPages":[32],"requestedPages":[32],"renderStart":[32],"renderEnd":[32],"colWidths":[32],"sortField":[32],"sortDir":[32],"init":[64],"setPage":[64]}]]],["mrd-boolean-field_16.cjs",[[2,"mrd-form",{"layout":[16],"locale":[1],"values":[16],"formValues":[32],"errors":[32],"submitted":[32],"setFieldValue":[64]}],[2,"mrd-field",{"item":[16],"locale":[1],"value":[16]}],[2,"mrd-boolean-field",{"name":[1],"label":[1],"value":[4],"required":[4],"disabled":[4],"locale":[1],"checked":[32]}],[2,"mrd-currency-field",{"name":[1],"label":[1],"value":[16],"required":[4],"disabled":[4],"locale":[1],"amountDisplay":[32],"currency":[32],"error":[32]}],[2,"mrd-date-field",{"name":[1],"label":[1],"value":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-datetime-field",{"name":[1],"label":[1],"value":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-email-field",{"name":[1],"label":[1],"value":[1],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-file-field",{"name":[1],"label":[1],"required":[4],"disabled":[4],"locale":[1],"accept":[1],"maxSize":[2,"max-size"],"fileName":[32],"isDragging":[32],"error":[32]}],[2,"mrd-hyperlink-field",{"name":[1],"label":[1],"value":[1],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-image-field",{"name":[1],"label":[1],"required":[4],"disabled":[4],"locale":[1],"accept":[1],"maxSize":[2,"max-size"],"previewUrl":[32],"fileName":[32],"isDragging":[32],"error":[32]}],[2,"mrd-list-field",{"name":[1],"label":[1],"value":[1],"required":[4],"disabled":[4],"multiple":[4],"locale":[1],"listValues":[16],"error":[32],"selected":[32]}],[2,"mrd-number-field",{"name":[1],"label":[1],"value":[2],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"dataType":[1,"data-type"],"decimalPrecision":[2,"decimal-precision"],"displayValue":[32],"error":[32]}],[2,"mrd-relation-field",{"name":[1],"label":[1],"required":[4],"disabled":[4],"locale":[1],"relatedClass":[1,"related-class"],"displayType":[1,"display-type"],"multiple":[4],"dropdownValues":[16],"value":[1],"searchQuery":[32],"searchResults":[32],"isLoading":[32],"selectedItems":[32],"showResults":[32],"error":[32],"highlightedIndex":[32],"setSearchResults":[64],"setLoading":[64]}],[2,"mrd-text-field",{"name":[1],"label":[1],"value":[1],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-textarea-field",{"name":[1],"label":[1],"value":[1],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32],"editorReady":[32]}],[2,"mrd-time-field",{"name":[1],"label":[1],"value":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}]]]], options);
+  return index.bootstrapLazy([["mrd-table.cjs",[[2,"mrd-table",{"columns":[16],"rows":[16],"locale":[1],"totalElements":[2,"total-elements"],"pageSize":[2,"page-size"],"rowHeight":[2,"row-height"],"tableHeight":[2,"table-height"],"defaultSort":[1,"default-sort"],"loadedPages":[32],"requestedPages":[32],"renderStart":[32],"renderEnd":[32],"colWidths":[32],"sortField":[32],"sortDir":[32],"init":[64],"setPage":[64]}]]],["mrd-boolean-field_16.cjs",[[2,"mrd-form",{"layout":[16],"locale":[1],"values":[16],"formValues":[32],"errors":[32],"submitted":[32],"setFieldValue":[64]},null,{"values":[{"valuesChanged":0}]}],[2,"mrd-field",{"item":[16],"locale":[1],"value":[16]}],[2,"mrd-boolean-field",{"name":[1],"label":[1],"value":[4],"required":[4],"disabled":[4],"locale":[1],"checked":[32]}],[2,"mrd-currency-field",{"name":[1],"label":[1],"value":[16],"required":[4],"disabled":[4],"locale":[1],"amountDisplay":[32],"currency":[32],"error":[32]}],[2,"mrd-date-field",{"name":[1],"label":[1],"value":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-datetime-field",{"name":[1],"label":[1],"value":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-email-field",{"name":[1],"label":[1],"value":[1],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-file-field",{"name":[1],"label":[1],"required":[4],"disabled":[4],"locale":[1],"accept":[1],"maxSize":[2,"max-size"],"fileName":[32],"isDragging":[32],"error":[32]}],[2,"mrd-hyperlink-field",{"name":[1],"label":[1],"value":[1],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-image-field",{"name":[1],"label":[1],"required":[4],"disabled":[4],"locale":[1],"accept":[1],"maxSize":[2,"max-size"],"previewUrl":[32],"fileName":[32],"isDragging":[32],"error":[32]}],[2,"mrd-list-field",{"name":[1],"label":[1],"value":[1],"required":[4],"disabled":[4],"multiple":[4],"locale":[1],"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);
 };
 
 exports.setNonce = index.setNonce;

package/dist/cjs/mosterdcomponents.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-OvnIRO4Y.js');
+var index = require('./index-BPj2cBXs.js');
 var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["mrd-table.cjs",[[2,"mrd-table",{"columns":[16],"rows":[16],"locale":[1],"totalElements":[2,"total-elements"],"pageSize":[2,"page-size"],"rowHeight":[2,"row-height"],"tableHeight":[2,"table-height"],"defaultSort":[1,"default-sort"],"loadedPages":[32],"requestedPages":[32],"renderStart":[32],"renderEnd":[32],"colWidths":[32],"sortField":[32],"sortDir":[32],"init":[64],"setPage":[64]}]]],["mrd-boolean-field_16.cjs",[[2,"mrd-form",{"layout":[16],"locale":[1],"values":[16],"formValues":[32],"errors":[32],"submitted":[32],"setFieldValue":[64]}],[2,"mrd-field",{"item":[16],"locale":[1],"value":[16]}],[2,"mrd-boolean-field",{"name":[1],"label":[1],"value":[4],"required":[4],"disabled":[4],"locale":[1],"checked":[32]}],[2,"mrd-currency-field",{"name":[1],"label":[1],"value":[16],"required":[4],"disabled":[4],"locale":[1],"amountDisplay":[32],"currency":[32],"error":[32]}],[2,"mrd-date-field",{"name":[1],"label":[1],"value":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-datetime-field",{"name":[1],"label":[1],"value":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-email-field",{"name":[1],"label":[1],"value":[1],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-file-field",{"name":[1],"label":[1],"required":[4],"disabled":[4],"locale":[1],"accept":[1],"maxSize":[2,"max-size"],"fileName":[32],"isDragging":[32],"error":[32]}],[2,"mrd-hyperlink-field",{"name":[1],"label":[1],"value":[1],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-image-field",{"name":[1],"label":[1],"required":[4],"disabled":[4],"locale":[1],"accept":[1],"maxSize":[2,"max-size"],"previewUrl":[32],"fileName":[32],"isDragging":[32],"error":[32]}],[2,"mrd-list-field",{"name":[1],"label":[1],"value":[1],"required":[4],"disabled":[4],"multiple":[4],"locale":[1],"listValues":[16],"error":[32],"selected":[32]}],[2,"mrd-number-field",{"name":[1],"label":[1],"value":[2],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"dataType":[1,"data-type"],"decimalPrecision":[2,"decimal-precision"],"displayValue":[32],"error":[32]}],[2,"mrd-relation-field",{"name":[1],"label":[1],"required":[4],"disabled":[4],"locale":[1],"relatedClass":[1,"related-class"],"displayType":[1,"display-type"],"multiple":[4],"dropdownValues":[16],"value":[1],"searchQuery":[32],"searchResults":[32],"isLoading":[32],"selectedItems":[32],"showResults":[32],"error":[32],"highlightedIndex":[32],"setSearchResults":[64],"setLoading":[64]}],[2,"mrd-text-field",{"name":[1],"label":[1],"value":[1],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-textarea-field",{"name":[1],"label":[1],"value":[1],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32],"editorReady":[32]}],[2,"mrd-time-field",{"name":[1],"label":[1],"value":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}]]]], options);
+  return index.bootstrapLazy([["mrd-table.cjs",[[2,"mrd-table",{"columns":[16],"rows":[16],"locale":[1],"totalElements":[2,"total-elements"],"pageSize":[2,"page-size"],"rowHeight":[2,"row-height"],"tableHeight":[2,"table-height"],"defaultSort":[1,"default-sort"],"loadedPages":[32],"requestedPages":[32],"renderStart":[32],"renderEnd":[32],"colWidths":[32],"sortField":[32],"sortDir":[32],"init":[64],"setPage":[64]}]]],["mrd-boolean-field_16.cjs",[[2,"mrd-form",{"layout":[16],"locale":[1],"values":[16],"formValues":[32],"errors":[32],"submitted":[32],"setFieldValue":[64]},null,{"values":[{"valuesChanged":0}]}],[2,"mrd-field",{"item":[16],"locale":[1],"value":[16]}],[2,"mrd-boolean-field",{"name":[1],"label":[1],"value":[4],"required":[4],"disabled":[4],"locale":[1],"checked":[32]}],[2,"mrd-currency-field",{"name":[1],"label":[1],"value":[16],"required":[4],"disabled":[4],"locale":[1],"amountDisplay":[32],"currency":[32],"error":[32]}],[2,"mrd-date-field",{"name":[1],"label":[1],"value":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-datetime-field",{"name":[1],"label":[1],"value":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-email-field",{"name":[1],"label":[1],"value":[1],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-file-field",{"name":[1],"label":[1],"required":[4],"disabled":[4],"locale":[1],"accept":[1],"maxSize":[2,"max-size"],"fileName":[32],"isDragging":[32],"error":[32]}],[2,"mrd-hyperlink-field",{"name":[1],"label":[1],"value":[1],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-image-field",{"name":[1],"label":[1],"required":[4],"disabled":[4],"locale":[1],"accept":[1],"maxSize":[2,"max-size"],"previewUrl":[32],"fileName":[32],"isDragging":[32],"error":[32]}],[2,"mrd-list-field",{"name":[1],"label":[1],"value":[1],"required":[4],"disabled":[4],"multiple":[4],"locale":[1],"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);
 });
 
 exports.setNonce = index.setNonce;

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-OvnIRO4Y.js');
+var index = require('./index-BPj2cBXs.js');
 var index$1 = require('./index.cjs.js');
 var format = require('./format-CDw-zie_.js');
 
@@ -511,6 +511,13 @@ const MrdForm = class {
         var _a;
         this.formValues = Object.assign({}, ((_a = this.values) !== null && _a !== void 0 ? _a : {}));
     }
+    /** Sync formValues when the values prop is set from outside after mount
+     *  (e.g. when pre-filling an existing record in edit mode). */
+    valuesChanged(newValues) {
+        this.formValues = Object.assign({}, (newValues !== null && newValues !== void 0 ? newValues : {}));
+        this.errors = {};
+        this.submitted = false;
+    }
     async setFieldValue(name, value) {
         this.formValues = Object.assign(Object.assign({}, this.formValues), { [name]: value });
         if (this.errors[name]) {
@@ -565,6 +572,11 @@ const MrdForm = class {
         const dir = this.locale.startsWith('ar') ? 'rtl' : 'ltr';
         return (index.h(index.Host, null, index.h("form", { class: "mrd-form", dir: dir, onSubmit: this.handleSubmit, noValidate: true }, this.layout.title && index.h("h2", { class: "mrd-form__title" }, this.layout.title), index.h("div", { class: "mrd-form__body" }, this.renderItems(this.layout.items)), index.h("div", { class: "mrd-form__footer" }, index.h("button", { type: "submit", class: "mrd-form__submit" }, t('submit', this.locale))))));
     }
+    static get watchers() { return {
+        "values": [{
+                "valuesChanged": 0
+            }]
+    }; }
 };
 MrdForm.style = mrdFormScss();
 
@@ -881,6 +893,7 @@ const MrdRelationField = class {
         this.displayType = index$1.ClientLayoutItemRelationDisplayType.SEARCH;
         this.multiple = false;
         this.dropdownValues = [];
+        /** Plain href string/array for normal use; pass { id, label } objects to pre-fill a loaded record. */
         this.value = null;
         this.searchQuery = '';
         this.searchResults = [];
@@ -1001,6 +1014,23 @@ 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;

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-OvnIRO4Y.js');
+var index = require('./index-BPj2cBXs.js');
 var format = require('./format-CDw-zie_.js');
 
 class CellRenderer {
@@ -60,7 +60,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
@@ -70,6 +70,7 @@ const MrdTable = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.mrdLoadPage = index.createEvent(this, "mrdLoadPage");
+        this.mrdRowClick = index.createEvent(this, "mrdRowClick");
         // ── Debounce internals (geen @State — triggert geen re-render) ─────────────
         /** Pagina's die wachten op debounce-flush. */
         this.pendingPages = new Set();
@@ -279,7 +280,7 @@ const MrdTable = class {
         const numericTypes = new Set(['INTEGER', 'DECIMAL', 'PERCENTAGE', 'CURRENCY']);
         // ── Non-paginated mode ──────────────────────────────────────────────────
         if (this.totalElements === 0) {
-            return (index.h(index.Host, null, index.h("div", { class: "mrd-table" }, index.h("table", { class: "mrd-table__table" }, index.h("thead", null, index.h("tr", null, this.columns.map(col => (index.h("th", { class: "mrd-table__header" }, col.label))))), index.h("tbody", null, (_b = this.rows) === null || _b === void 0 ? void 0 : _b.map((row, i) => (index.h("tr", { class: "mrd-table__row", style: { background: i % 2 === 0 ? '' : 'var(--mrd-color-neutral-100)' } }, this.columns.map(col => {
+            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;
                 const value = CellRenderer.render(col, row, this.locale);
                 const isNumeric = col.type === 'FIELD' && numericTypes.has((_a = col.dataType) !== null && _a !== void 0 ? _a : '');
@@ -298,7 +299,7 @@ const MrdTable = class {
                 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" }))));
             }
             else {
-                renderedRows.push(index.h("tr", { class: "mrd-table__row", style: { background: i % 2 === 0 ? '' : 'var(--mrd-color-neutral-100)' } }, this.columns.map(col => {
+                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;
                     const value = CellRenderer.render(col, row, this.locale);
                     const isNumeric = col.type === 'FIELD' && numericTypes.has((_a = col.dataType) !== null && _a !== void 0 ? _a : '');

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

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

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

@@ -13,6 +13,7 @@ export class MrdRelationField {
         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 = [];
@@ -133,6 +134,23 @@ export class MrdRelationField {
     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;
@@ -358,15 +376,22 @@ export class MrdRelationField {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string | string[] | null",
-                    "resolved": "null | string | string[]",
-                    "references": {}
+                    "original": "string | string[] | RelationSearchResult | RelationSearchResult[] | null",
+                    "resolved": "RelationSearchResult | RelationSearchResult[] | null | string | string[]",
+                    "references": {
+                        "RelationSearchResult": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::RelationSearchResult",
+                            "referenceLocation": "RelationSearchResult"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Plain href string/array for normal use; pass { id, label } objects to pre-fill a loaded record."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -215,7 +215,7 @@ 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", style: { background: i % 2 === 0 ? '' : 'var(--mrd-color-neutral-100)' } }, this.columns.map(col => {
+            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;
                 const value = CellRenderer.render(col, row, this.locale);
                 const isNumeric = col.type === 'FIELD' && numericTypes.has((_a = col.dataType) !== null && _a !== void 0 ? _a : '');
@@ -234,7 +234,7 @@ export class MrdTable {
                 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 => {
+                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;
                     const value = CellRenderer.render(col, row, this.locale);
                     const isNumeric = col.type === 'FIELD' && numericTypes.has((_a = col.dataType) !== null && _a !== void 0 ? _a : '');
@@ -462,6 +462,26 @@ export class MrdTable {
                     "resolved": "{ page: number; sort: string; }",
                     "references": {}
                 }
+            }, {
+                "method": "mrdRowClick",
+                "name": "mrdRowClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when a data row is clicked. Detail is the full row object including _links."
+                },
+                "complexType": {
+                    "original": "Record<string, any>",
+                    "resolved": "any | string",
+                    "references": {
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    }
+                }
             }];
     }
     static get methods() {

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

@@ -96,6 +96,10 @@
   background: var(--mrd-color-neutral-200) !important;
 }
 
+.mrd-table__row--clickable {
+  cursor: pointer;
+}
+
 /* ── Spacer rows (virtual scroll padding above/below render window) ─────── */
 .mrd-table__spacer {
   border: none;

package/dist/components/mrd-form.js

@@ -1 +1 @@
-import{proxyCustomElement as r,HTMLElement as e,createEvent as m,h as d,Host as o,transformTag as t}from"@stencil/core/internal/client";import{C as i}from"./client-layout.js";import{t as s}from"./i18n.js";import{v as a}from"./validation.js";import{d as l}from"./mrd-boolean-field2.js";import{d as f}from"./mrd-currency-field2.js";import{d as n}from"./mrd-date-field2.js";import{d as c}from"./mrd-datetime-field2.js";import{d as u}from"./mrd-email-field2.js";import{d as h}from"./mrd-field2.js";import{d as p}from"./mrd-file-field2.js";import{d as v}from"./mrd-hyperlink-field2.js";import{d as b}from"./mrd-image-field2.js";import{d as _}from"./mrd-list-field2.js";import{d as g}from"./mrd-number-field2.js";import{d as y}from"./mrd-relation-field2.js";import{d as j}from"./mrd-text-field2.js";import{d as x}from"./mrd-textarea-field2.js";import{d as k}from"./mrd-time-field2.js";const E=r(class extends e{constructor(r){super(),!1!==r&&this.__registerHost(),this.mrdSubmit=m(this,"mrdSubmit",7),this.mrdSearch=m(this,"mrdSearch",7),this.locale=navigator.language,this.values={},this.formValues={},this.errors={},this.submitted=!1,this.handleFieldChange=r=>{const{name:e,value:m}=r.detail;this.formValues=Object.assign(Object.assign({},this.formValues),{[e]:m}),this.errors[e]&&(this.errors=Object.assign(Object.assign({},this.errors),{[e]:""}))},this.handleSearch=r=>{this.mrdSearch.emit(r.detail)},this.handleSubmit=r=>{r.preventDefault(),this.submitted=!0,this.validate()&&this.mrdSubmit.emit(Object.assign({},this.formValues))}}componentWillLoad(){var r;this.formValues=Object.assign({},null!==(r=this.values)&&void 0!==r?r:{})}async setFieldValue(r,e){this.formValues=Object.assign(Object.assign({},this.formValues),{[r]:e}),this.errors[r]&&(this.errors=Object.assign(Object.assign({},this.errors),{[r]:""}))}collectFields(r){const e=[];for(const m of r)m.type!==i.FIELD&&m.type!==i.RELATION||e.push(m),m.items&&e.push(...this.collectFields(m.items));return e}validate(){var r,e,m;const d={},o=this.collectFields(null!==(e=null===(r=this.layout)||void 0===r?void 0:r.items)&&void 0!==e?e:[]);for(const r of o){const e=null!==(m=r.field)&&void 0!==m?m:r.relation;e&&e.required&&!a(this.formValues[e.name])&&(d[e.name]=s("required",this.locale))}return this.errors=d,0===Object.keys(d).length}renderItems(r){return r.map((r=>{var e,m,o,t;if(r.type===i.SECTION)return d("fieldset",{class:"mrd-form__section"},r.label&&d("legend",{class:"mrd-form__section-legend"},r.label),d("div",{class:"mrd-form__section-body"},r.items&&this.renderItems(r.items)));if(r.type===i.GROUP)return d("div",{class:"mrd-form__group"},r.label&&d("div",{class:"mrd-form__group-label"},r.label),d("div",{class:"mrd-form__group-body"},r.items&&this.renderItems(r.items)));const s=null!==(t=null!==(m=null===(e=r.field)||void 0===e?void 0:e.name)&&void 0!==m?m:null===(o=r.relation)||void 0===o?void 0:o.name)&&void 0!==t?t:"";return d("div",{class:"mrd-form__field"},d("mrd-field",{item:r,locale:this.locale,value:this.formValues[s],onMrdChange:this.handleFieldChange,onMrdBlur:this.handleFieldChange,onMrdSearch:this.handleSearch}),this.errors[s]&&d("span",{class:"mrd-form__field-error"},this.errors[s]))}))}render(){if(!this.layout)return d(o,null);const r=this.locale.startsWith("ar")?"rtl":"ltr";return d(o,null,d("form",{class:"mrd-form",dir:r,onSubmit:this.handleSubmit,noValidate:!0},this.layout.title&&d("h2",{class:"mrd-form__title"},this.layout.title),d("div",{class:"mrd-form__body"},this.renderItems(this.layout.items)),d("div",{class:"mrd-form__footer"},d("button",{type:"submit",class:"mrd-form__submit"},s("submit",this.locale)))))}static get style(){return".sc-mrd-form-h{display:block}.mrd-form.sc-mrd-form{font-family:var(--mrd-font-family);width:100%}.mrd-form__title.sc-mrd-form{font-size:var(--mrd-font-size-2xl);font-weight:var(--mrd-font-weight-bold);color:var(--mrd-color-neutral-900);margin:0 0 var(--mrd-space-6) 0}.mrd-form__body.sc-mrd-form{display:flex;flex-direction:column;gap:var(--mrd-space-5)}.mrd-form__field.sc-mrd-form{display:flex;flex-direction:column;gap:var(--mrd-space-1)}.mrd-form__field-error.sc-mrd-form{font-family:var(--mrd-font-family);font-size:var(--mrd-error-font-size);color:var(--mrd-error-color)}.mrd-form__section.sc-mrd-form{border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius-md);padding:var(--mrd-space-4) var(--mrd-space-5);margin:0}.mrd-form__section-legend.sc-mrd-form{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);font-weight:var(--mrd-font-weight-semibold);color:var(--mrd-color-neutral-700);padding:0 var(--mrd-space-2)}.mrd-form__section-body.sc-mrd-form{display:flex;flex-direction:column;gap:var(--mrd-space-4);margin-top:var(--mrd-space-2)}.mrd-form__group.sc-mrd-form{display:flex;flex-direction:column;gap:var(--mrd-space-2)}.mrd-form__group-label.sc-mrd-form{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);font-weight:var(--mrd-font-weight-semibold);color:var(--mrd-color-neutral-500);text-transform:uppercase;letter-spacing:0.05em}.mrd-form__group-body.sc-mrd-form{display:flex;flex-direction:column;gap:var(--mrd-space-4);padding-left:var(--mrd-space-4);border-left:3px solid var(--mrd-color-neutral-200)}.mrd-form__footer.sc-mrd-form{margin-top:var(--mrd-space-8);padding-top:var(--mrd-space-5);border-top:var(--mrd-border-width) solid var(--mrd-border-color);display:flex;justify-content:flex-end}.mrd-form__submit.sc-mrd-form{display:inline-flex;align-items:center;justify-content:center;height:var(--mrd-input-height);padding:0 var(--mrd-space-6);background-color:var(--mrd-color-primary);color:var(--mrd-color-white);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);font-weight:var(--mrd-font-weight-medium);border:none;border-radius:var(--mrd-border-radius);cursor:pointer;transition:background-color var(--mrd-transition)}.mrd-form__submit.sc-mrd-form:hover{background-color:var(--mrd-color-primary-hover)}.mrd-form__submit.sc-mrd-form:focus{outline:none;box-shadow:var(--mrd-shadow-focus)}.mrd-form__submit.sc-mrd-form:active{background-color:var(--mrd-color-primary-dark)}"}},[2,"mrd-form",{layout:[16],locale:[1],values:[16],formValues:[32],errors:[32],submitted:[32],setFieldValue:[64]}]),w=E,O=function(){"undefined"!=typeof customElements&&["mrd-form","mrd-boolean-field","mrd-currency-field","mrd-date-field","mrd-datetime-field","mrd-email-field","mrd-field","mrd-file-field","mrd-hyperlink-field","mrd-image-field","mrd-list-field","mrd-number-field","mrd-relation-field","mrd-text-field","mrd-textarea-field","mrd-time-field"].forEach((r=>{switch(r){case"mrd-form":customElements.get(t(r))||customElements.define(t(r),E);break;case"mrd-boolean-field":customElements.get(t(r))||l();break;case"mrd-currency-field":customElements.get(t(r))||f();break;case"mrd-date-field":customElements.get(t(r))||n();break;case"mrd-datetime-field":customElements.get(t(r))||c();break;case"mrd-email-field":customElements.get(t(r))||u();break;case"mrd-field":customElements.get(t(r))||h();break;case"mrd-file-field":customElements.get(t(r))||p();break;case"mrd-hyperlink-field":customElements.get(t(r))||v();break;case"mrd-image-field":customElements.get(t(r))||b();break;case"mrd-list-field":customElements.get(t(r))||_();break;case"mrd-number-field":customElements.get(t(r))||g();break;case"mrd-relation-field":customElements.get(t(r))||y();break;case"mrd-text-field":customElements.get(t(r))||j();break;case"mrd-textarea-field":customElements.get(t(r))||x();break;case"mrd-time-field":customElements.get(t(r))||k()}}))};export{w as MrdForm,O as defineCustomElement}
+import{proxyCustomElement as r,HTMLElement as e,createEvent as m,h as d,Host as o,transformTag as t}from"@stencil/core/internal/client";import{C as i}from"./client-layout.js";import{t as s}from"./i18n.js";import{v as a}from"./validation.js";import{d as l}from"./mrd-boolean-field2.js";import{d as f}from"./mrd-currency-field2.js";import{d as n}from"./mrd-date-field2.js";import{d as c}from"./mrd-datetime-field2.js";import{d as u}from"./mrd-email-field2.js";import{d as h}from"./mrd-field2.js";import{d as v}from"./mrd-file-field2.js";import{d as p}from"./mrd-hyperlink-field2.js";import{d as b}from"./mrd-image-field2.js";import{d as _}from"./mrd-list-field2.js";import{d as g}from"./mrd-number-field2.js";import{d as y}from"./mrd-relation-field2.js";import{d as j}from"./mrd-text-field2.js";import{d as x}from"./mrd-textarea-field2.js";import{d as k}from"./mrd-time-field2.js";const E=r(class extends e{constructor(r){super(),!1!==r&&this.__registerHost(),this.mrdSubmit=m(this,"mrdSubmit",7),this.mrdSearch=m(this,"mrdSearch",7),this.locale=navigator.language,this.values={},this.formValues={},this.errors={},this.submitted=!1,this.handleFieldChange=r=>{const{name:e,value:m}=r.detail;this.formValues=Object.assign(Object.assign({},this.formValues),{[e]:m}),this.errors[e]&&(this.errors=Object.assign(Object.assign({},this.errors),{[e]:""}))},this.handleSearch=r=>{this.mrdSearch.emit(r.detail)},this.handleSubmit=r=>{r.preventDefault(),this.submitted=!0,this.validate()&&this.mrdSubmit.emit(Object.assign({},this.formValues))}}componentWillLoad(){var r;this.formValues=Object.assign({},null!==(r=this.values)&&void 0!==r?r:{})}valuesChanged(r){this.formValues=Object.assign({},null!=r?r:{}),this.errors={},this.submitted=!1}async setFieldValue(r,e){this.formValues=Object.assign(Object.assign({},this.formValues),{[r]:e}),this.errors[r]&&(this.errors=Object.assign(Object.assign({},this.errors),{[r]:""}))}collectFields(r){const e=[];for(const m of r)m.type!==i.FIELD&&m.type!==i.RELATION||e.push(m),m.items&&e.push(...this.collectFields(m.items));return e}validate(){var r,e,m;const d={},o=this.collectFields(null!==(e=null===(r=this.layout)||void 0===r?void 0:r.items)&&void 0!==e?e:[]);for(const r of o){const e=null!==(m=r.field)&&void 0!==m?m:r.relation;e&&e.required&&!a(this.formValues[e.name])&&(d[e.name]=s("required",this.locale))}return this.errors=d,0===Object.keys(d).length}renderItems(r){return r.map((r=>{var e,m,o,t;if(r.type===i.SECTION)return d("fieldset",{class:"mrd-form__section"},r.label&&d("legend",{class:"mrd-form__section-legend"},r.label),d("div",{class:"mrd-form__section-body"},r.items&&this.renderItems(r.items)));if(r.type===i.GROUP)return d("div",{class:"mrd-form__group"},r.label&&d("div",{class:"mrd-form__group-label"},r.label),d("div",{class:"mrd-form__group-body"},r.items&&this.renderItems(r.items)));const s=null!==(t=null!==(m=null===(e=r.field)||void 0===e?void 0:e.name)&&void 0!==m?m:null===(o=r.relation)||void 0===o?void 0:o.name)&&void 0!==t?t:"";return d("div",{class:"mrd-form__field"},d("mrd-field",{item:r,locale:this.locale,value:this.formValues[s],onMrdChange:this.handleFieldChange,onMrdBlur:this.handleFieldChange,onMrdSearch:this.handleSearch}),this.errors[s]&&d("span",{class:"mrd-form__field-error"},this.errors[s]))}))}render(){if(!this.layout)return d(o,null);const r=this.locale.startsWith("ar")?"rtl":"ltr";return d(o,null,d("form",{class:"mrd-form",dir:r,onSubmit:this.handleSubmit,noValidate:!0},this.layout.title&&d("h2",{class:"mrd-form__title"},this.layout.title),d("div",{class:"mrd-form__body"},this.renderItems(this.layout.items)),d("div",{class:"mrd-form__footer"},d("button",{type:"submit",class:"mrd-form__submit"},s("submit",this.locale)))))}static get watchers(){return{values:[{valuesChanged:0}]}}static get style(){return".sc-mrd-form-h{display:block}.mrd-form.sc-mrd-form{font-family:var(--mrd-font-family);width:100%}.mrd-form__title.sc-mrd-form{font-size:var(--mrd-font-size-2xl);font-weight:var(--mrd-font-weight-bold);color:var(--mrd-color-neutral-900);margin:0 0 var(--mrd-space-6) 0}.mrd-form__body.sc-mrd-form{display:flex;flex-direction:column;gap:var(--mrd-space-5)}.mrd-form__field.sc-mrd-form{display:flex;flex-direction:column;gap:var(--mrd-space-1)}.mrd-form__field-error.sc-mrd-form{font-family:var(--mrd-font-family);font-size:var(--mrd-error-font-size);color:var(--mrd-error-color)}.mrd-form__section.sc-mrd-form{border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius-md);padding:var(--mrd-space-4) var(--mrd-space-5);margin:0}.mrd-form__section-legend.sc-mrd-form{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);font-weight:var(--mrd-font-weight-semibold);color:var(--mrd-color-neutral-700);padding:0 var(--mrd-space-2)}.mrd-form__section-body.sc-mrd-form{display:flex;flex-direction:column;gap:var(--mrd-space-4);margin-top:var(--mrd-space-2)}.mrd-form__group.sc-mrd-form{display:flex;flex-direction:column;gap:var(--mrd-space-2)}.mrd-form__group-label.sc-mrd-form{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);font-weight:var(--mrd-font-weight-semibold);color:var(--mrd-color-neutral-500);text-transform:uppercase;letter-spacing:0.05em}.mrd-form__group-body.sc-mrd-form{display:flex;flex-direction:column;gap:var(--mrd-space-4);padding-left:var(--mrd-space-4);border-left:3px solid var(--mrd-color-neutral-200)}.mrd-form__footer.sc-mrd-form{margin-top:var(--mrd-space-8);padding-top:var(--mrd-space-5);border-top:var(--mrd-border-width) solid var(--mrd-border-color);display:flex;justify-content:flex-end}.mrd-form__submit.sc-mrd-form{display:inline-flex;align-items:center;justify-content:center;height:var(--mrd-input-height);padding:0 var(--mrd-space-6);background-color:var(--mrd-color-primary);color:var(--mrd-color-white);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);font-weight:var(--mrd-font-weight-medium);border:none;border-radius:var(--mrd-border-radius);cursor:pointer;transition:background-color var(--mrd-transition)}.mrd-form__submit.sc-mrd-form:hover{background-color:var(--mrd-color-primary-hover)}.mrd-form__submit.sc-mrd-form:focus{outline:none;box-shadow:var(--mrd-shadow-focus)}.mrd-form__submit.sc-mrd-form:active{background-color:var(--mrd-color-primary-dark)}"}},[2,"mrd-form",{layout:[16],locale:[1],values:[16],formValues:[32],errors:[32],submitted:[32],setFieldValue:[64]},void 0,{values:[{valuesChanged:0}]}]),w=E,O=function(){"undefined"!=typeof customElements&&["mrd-form","mrd-boolean-field","mrd-currency-field","mrd-date-field","mrd-datetime-field","mrd-email-field","mrd-field","mrd-file-field","mrd-hyperlink-field","mrd-image-field","mrd-list-field","mrd-number-field","mrd-relation-field","mrd-text-field","mrd-textarea-field","mrd-time-field"].forEach((r=>{switch(r){case"mrd-form":customElements.get(t(r))||customElements.define(t(r),E);break;case"mrd-boolean-field":customElements.get(t(r))||l();break;case"mrd-currency-field":customElements.get(t(r))||f();break;case"mrd-date-field":customElements.get(t(r))||n();break;case"mrd-datetime-field":customElements.get(t(r))||c();break;case"mrd-email-field":customElements.get(t(r))||u();break;case"mrd-field":customElements.get(t(r))||h();break;case"mrd-file-field":customElements.get(t(r))||v();break;case"mrd-hyperlink-field":customElements.get(t(r))||p();break;case"mrd-image-field":customElements.get(t(r))||b();break;case"mrd-list-field":customElements.get(t(r))||_();break;case"mrd-number-field":customElements.get(t(r))||g();break;case"mrd-relation-field":customElements.get(t(r))||y();break;case"mrd-text-field":customElements.get(t(r))||j();break;case"mrd-textarea-field":customElements.get(t(r))||x();break;case"mrd-time-field":customElements.get(t(r))||k()}}))};export{w as MrdForm,O as defineCustomElement}

package/dist/components/mrd-relation-field2.js

@@ -1 +1 @@
-import{proxyCustomElement as r,HTMLElement as e,createEvent as i,h as t,Host as o,transformTag as l}from"@stencil/core/internal/client";import{t as d}from"./i18n.js";import{v as a}from"./validation.js";import{b as s}from"./client-layout.js";const n=r(class extends e{constructor(r){super(),!1!==r&&this.__registerHost(),this.mrdChange=i(this,"mrdChange",7),this.mrdBlur=i(this,"mrdBlur",7),this.mrdSearch=i(this,"mrdSearch",7),this.name="",this.label="",this.required=!1,this.disabled=!1,this.locale=navigator.language,this.relatedClass="",this.displayType=s.SEARCH,this.multiple=!1,this.dropdownValues=[],this.value=null,this.searchQuery="",this.searchResults=[],this.isLoading=!1,this.selectedItems=[],this.showResults=!1,this.error="",this.highlightedIndex=-1,this.searchDebounce=null,this.handleKeyDown=r=>{this.showResults&&0!==this.searchResults.length?"ArrowDown"===r.key?(r.preventDefault(),this.highlightedIndex=Math.min(this.highlightedIndex+1,this.searchResults.length-1)):"ArrowUp"===r.key?(r.preventDefault(),this.highlightedIndex=Math.max(this.highlightedIndex-1,0)):"Enter"===r.key?(r.preventDefault(),this.highlightedIndex>=0&&this.handleResultSelect(this.searchResults[this.highlightedIndex])):"Escape"===r.key&&(this.showResults=!1,this.highlightedIndex=-1):"Escape"===r.key&&(this.showResults=!1,this.highlightedIndex=-1)},this.clearSelection=()=>{this.selectedItems=[],this.searchQuery="",this.searchResults=[],this.showResults=!1,this.highlightedIndex=-1,this.mrdChange.emit({name:this.name,value:this.multiple?[]:null})},this.handleSearchInput=r=>{const e=r.target.value;this.searchQuery=e,this.searchDebounce&&clearTimeout(this.searchDebounce),e.trim().length>=2?(this.isLoading=!0,this.showResults=!0,this.searchDebounce=setTimeout((()=>{this.mrdSearch.emit({query:e,relatedClass:this.relatedClass})}),300)):(this.searchResults=[],this.showResults=!1,this.isLoading=!1)},this.handleResultSelect=r=>{if(this.multiple){this.selectedItems.find((e=>e.id===r.id))||(this.selectedItems=[...this.selectedItems,r]),this.searchQuery="",this.searchResults=[],this.showResults=!1;const e=this.selectedItems.map((r=>r.id));this.mrdChange.emit({name:this.name,value:e})}else this.selectedItems=[r],this.searchQuery=r.label,this.showResults=!1,this.mrdChange.emit({name:this.name,value:r.id});this.error=this.required&&!a(this.selectedItems)?d("required",this.locale):""},this.handleRemoveSelected=r=>{this.selectedItems=this.selectedItems.filter((e=>e.id!==r));const e=this.selectedItems.map((r=>r.id));this.mrdChange.emit({name:this.name,value:this.multiple?e:null})},this.handleDropdownChange=r=>{const e=r.target.value;this.error=this.required&&!a(e)?d("required",this.locale):"",this.mrdChange.emit({name:this.name,value:e})},this.handleBlur=()=>{var r,e;setTimeout((()=>{this.showResults=!1,this.highlightedIndex=-1}),200);const i=this.multiple?this.selectedItems.map((r=>r.id)):null!==(e=null===(r=this.selectedItems[0])||void 0===r?void 0:r.id)&&void 0!==e?e:null;this.mrdBlur.emit({name:this.name,value:i})}}async setSearchResults(r){this.searchResults=r,this.isLoading=!1,this.showResults=!0,this.highlightedIndex=-1}async setLoading(r){this.isLoading=r}render(){var r,e;const i=!!this.error;if(this.displayType===s.DROPDOWN){const l=Array.isArray(this.value)?null!==(r=this.value[0])&&void 0!==r?r:"":null!==(e=this.value)&&void 0!==e?e:"";return t(o,null,t("div",{class:"mrd-relation-field"},this.label&&t("label",{class:"mrd-relation-field__label"+(this.required?" mrd-relation-field__label--required":"")},this.label),t("select",{class:"mrd-relation-field__select"+(i?" mrd-relation-field__select--error":""),name:this.name,required:this.required,disabled:this.disabled,onChange:this.handleDropdownChange},t("option",{value:""},d("select_placeholder",this.locale)),this.dropdownValues.map((r=>t("option",{key:r.value,value:r.value,selected:r.value===l},r.label)))),i&&t("span",{class:"mrd-relation-field__error"},this.error)))}const l=this.label&&t("label",{class:"mrd-relation-field__label"+(this.required?" mrd-relation-field__label--required":"")},this.label);return t(o,null,!this.multiple&&this.selectedItems.length>0?t("div",{class:"mrd-relation-field"},l,t("div",{class:"mrd-relation-field__selected-value"+(i?" mrd-relation-field__selected-value--error":"")},t("span",{class:"mrd-relation-field__selected-name"},this.selectedItems[0].label),t("button",{type:"button",class:"mrd-relation-field__selected-clear",onClick:this.clearSelection,"aria-label":d("remove",this.locale)},"✕")),i&&t("span",{class:"mrd-relation-field__error"},this.error)):t("div",{class:"mrd-relation-field"},l,this.multiple&&this.selectedItems.length>0&&t("div",{class:"mrd-relation-field__tags"},this.selectedItems.map((r=>t("span",{key:r.id,class:"mrd-relation-field__tag"},r.label,t("button",{type:"button",class:"mrd-relation-field__tag-remove",onClick:()=>this.handleRemoveSelected(r.id),"aria-label":d("remove",this.locale)},"✕"))))),t("div",{class:"mrd-relation-field__search-wrapper"},t("input",{class:"mrd-relation-field__search"+(i?" mrd-relation-field__search--error":""),type:"text",value:this.searchQuery,placeholder:d("search_placeholder",this.locale),disabled:this.disabled,onInput:this.handleSearchInput,onKeyDown:this.handleKeyDown,onBlur:this.handleBlur}),this.isLoading&&t("span",{class:"mrd-relation-field__spinner","aria-label":d("loading",this.locale)})),this.showResults&&t("div",{class:"mrd-relation-field__results"},0!==this.searchResults.length||this.isLoading?this.searchResults.map(((r,e)=>t("div",{key:r.id,class:"mrd-relation-field__result-item"+(e===this.highlightedIndex?" mrd-relation-field__result-item--highlighted":""),onMouseDown:()=>this.handleResultSelect(r)},t("span",{class:"mrd-relation-field__result-label"},r.label),r.description&&t("span",{class:"mrd-relation-field__result-desc"},r.description)))):t("div",{class:"mrd-relation-field__no-results"},d("no_results",this.locale))),i&&t("span",{class:"mrd-relation-field__error"},this.error)))}static get style(){return".sc-mrd-relation-field-h{display:block}.mrd-relation-field.sc-mrd-relation-field{display:flex;flex-direction:column;gap:var(--mrd-space-1);width:100%;position:relative}.mrd-relation-field__label.sc-mrd-relation-field{display:block;font-family:var(--mrd-font-family);font-size:var(--mrd-label-font-size);font-weight:var(--mrd-label-font-weight);color:var(--mrd-label-color)}.mrd-relation-field__label--required.sc-mrd-relation-field::after{content:' *';color:var(--mrd-color-danger)}.mrd-relation-field__select.sc-mrd-relation-field{display:block;width:100%;height:var(--mrd-input-height);padding:var(--mrd-input-padding-y) var(--mrd-input-padding-x);padding-right:calc(var(--mrd-input-padding-x) + 1.5rem);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);color:var(--mrd-input-color);background-color:var(--mrd-input-bg);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right var(--mrd-space-3) center;border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);outline:none;appearance:none;cursor:pointer;box-sizing:border-box}.mrd-relation-field__select.sc-mrd-relation-field:focus{border-color:var(--mrd-border-color-focus);box-shadow:var(--mrd-shadow-focus)}.mrd-relation-field__select.sc-mrd-relation-field:disabled{background-color:var(--mrd-input-bg-disabled);cursor:not-allowed;opacity:0.7}.mrd-relation-field__select--error.sc-mrd-relation-field{border-color:var(--mrd-border-color-error)}.mrd-relation-field__select--error.sc-mrd-relation-field:focus{box-shadow:var(--mrd-shadow-focus-error)}.mrd-relation-field__tags.sc-mrd-relation-field{display:flex;flex-wrap:wrap;gap:var(--mrd-space-1);margin-bottom:var(--mrd-space-1)}.mrd-relation-field__tag.sc-mrd-relation-field{display:inline-flex;align-items:center;gap:var(--mrd-space-1);padding:var(--mrd-space-1) var(--mrd-space-2);background-color:var(--mrd-color-primary-light);color:var(--mrd-color-primary-dark);border-radius:var(--mrd-border-radius-full);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);font-weight:var(--mrd-font-weight-medium)}.mrd-relation-field__tag-remove.sc-mrd-relation-field{background:none;border:none;cursor:pointer;color:var(--mrd-color-primary-dark);font-size:var(--mrd-font-size-xs);padding:0;line-height:1;opacity:0.7}.mrd-relation-field__tag-remove.sc-mrd-relation-field:hover{opacity:1}.mrd-relation-field__search-wrapper.sc-mrd-relation-field{position:relative;display:flex;align-items:center}.mrd-relation-field__search.sc-mrd-relation-field{display:block;width:100%;height:var(--mrd-input-height);padding:var(--mrd-input-padding-y) var(--mrd-input-padding-x);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);color:var(--mrd-input-color);background-color:var(--mrd-input-bg);border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);outline:none;appearance:none;box-sizing:border-box}.mrd-relation-field__search.sc-mrd-relation-field::placeholder{color:var(--mrd-input-placeholder-color)}.mrd-relation-field__search.sc-mrd-relation-field:focus{border-color:var(--mrd-border-color-focus);box-shadow:var(--mrd-shadow-focus)}.mrd-relation-field__search.sc-mrd-relation-field:disabled{background-color:var(--mrd-input-bg-disabled);cursor:not-allowed;opacity:0.7}.mrd-relation-field__search--error.sc-mrd-relation-field{border-color:var(--mrd-border-color-error)}.mrd-relation-field__search--error.sc-mrd-relation-field:focus{box-shadow:var(--mrd-shadow-focus-error)}.mrd-relation-field__spinner.sc-mrd-relation-field{position:absolute;right:var(--mrd-space-3);width:16px;height:16px;border:2px solid var(--mrd-color-neutral-200);border-top-color:var(--mrd-color-primary);border-radius:50%;animation:mrd-spin 0.7s linear infinite}@keyframes mrd-spin{to{transform:rotate(360deg)}}.mrd-relation-field__results.sc-mrd-relation-field{position:absolute;top:calc(100% + var(--mrd-space-1));left:0;right:0;background-color:var(--mrd-color-white);border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);box-shadow:var(--mrd-shadow-md);z-index:var(--mrd-z-dropdown);max-height:240px;overflow-y:auto}.mrd-relation-field__result-item.sc-mrd-relation-field{display:flex;flex-direction:column;padding:var(--mrd-space-2) var(--mrd-space-3);cursor:pointer;transition:background-color var(--mrd-transition-fast)}.mrd-relation-field__result-item.sc-mrd-relation-field:hover{background-color:var(--mrd-color-neutral-50)}.mrd-relation-field__result-item.sc-mrd-relation-field:not(:last-child){border-bottom:var(--mrd-border-width) solid var(--mrd-color-neutral-100)}.mrd-relation-field__result-label.sc-mrd-relation-field{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);color:var(--mrd-color-neutral-800);font-weight:var(--mrd-font-weight-medium)}.mrd-relation-field__result-desc.sc-mrd-relation-field{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-xs);color:var(--mrd-color-neutral-500);margin-top:var(--mrd-space-1)}.mrd-relation-field__result-item--highlighted.sc-mrd-relation-field{background-color:var(--mrd-color-primary-light)}.mrd-relation-field__selected-value.sc-mrd-relation-field{display:flex;align-items:center;gap:var(--mrd-space-2);height:var(--mrd-input-height);padding:var(--mrd-input-padding-y) var(--mrd-input-padding-x);background-color:var(--mrd-color-primary-light);border:var(--mrd-border-width) solid var(--mrd-color-primary);border-radius:var(--mrd-border-radius);box-sizing:border-box}.mrd-relation-field__selected-value--error.sc-mrd-relation-field{border-color:var(--mrd-border-color-error);background-color:var(--mrd-color-danger-light)}.mrd-relation-field__selected-name.sc-mrd-relation-field{flex:1;font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);font-weight:var(--mrd-font-weight-medium);color:var(--mrd-color-primary-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mrd-relation-field__selected-clear.sc-mrd-relation-field{flex-shrink:0;background:none;border:none;cursor:pointer;color:var(--mrd-color-primary-dark);font-size:var(--mrd-font-size-sm);padding:0;line-height:1;opacity:0.6;transition:opacity var(--mrd-transition-fast)}.mrd-relation-field__selected-clear.sc-mrd-relation-field:hover{opacity:1}.mrd-relation-field__no-results.sc-mrd-relation-field{padding:var(--mrd-space-4);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);color:var(--mrd-color-neutral-500);text-align:center}.mrd-relation-field__error.sc-mrd-relation-field{font-family:var(--mrd-font-family);font-size:var(--mrd-error-font-size);color:var(--mrd-error-color)}"}},[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]}]);function m(){"undefined"!=typeof customElements&&["mrd-relation-field"].forEach((r=>{"mrd-relation-field"===r&&(customElements.get(l(r))||customElements.define(l(r),n))}))}export{n as M,m as d}
+import{proxyCustomElement as r,HTMLElement as e,createEvent as i,h as t,Host as o,transformTag as l}from"@stencil/core/internal/client";import{t as d}from"./i18n.js";import{v as a}from"./validation.js";import{b as s}from"./client-layout.js";const n=r(class extends e{constructor(r){super(),!1!==r&&this.__registerHost(),this.mrdChange=i(this,"mrdChange",7),this.mrdBlur=i(this,"mrdBlur",7),this.mrdSearch=i(this,"mrdSearch",7),this.name="",this.label="",this.required=!1,this.disabled=!1,this.locale=navigator.language,this.relatedClass="",this.displayType=s.SEARCH,this.multiple=!1,this.dropdownValues=[],this.value=null,this.searchQuery="",this.searchResults=[],this.isLoading=!1,this.selectedItems=[],this.showResults=!1,this.error="",this.highlightedIndex=-1,this.searchDebounce=null,this.handleKeyDown=r=>{this.showResults&&0!==this.searchResults.length?"ArrowDown"===r.key?(r.preventDefault(),this.highlightedIndex=Math.min(this.highlightedIndex+1,this.searchResults.length-1)):"ArrowUp"===r.key?(r.preventDefault(),this.highlightedIndex=Math.max(this.highlightedIndex-1,0)):"Enter"===r.key?(r.preventDefault(),this.highlightedIndex>=0&&this.handleResultSelect(this.searchResults[this.highlightedIndex])):"Escape"===r.key&&(this.showResults=!1,this.highlightedIndex=-1):"Escape"===r.key&&(this.showResults=!1,this.highlightedIndex=-1)},this.clearSelection=()=>{this.selectedItems=[],this.searchQuery="",this.searchResults=[],this.showResults=!1,this.highlightedIndex=-1,this.mrdChange.emit({name:this.name,value:this.multiple?[]:null})},this.handleSearchInput=r=>{const e=r.target.value;this.searchQuery=e,this.searchDebounce&&clearTimeout(this.searchDebounce),e.trim().length>=2?(this.isLoading=!0,this.showResults=!0,this.searchDebounce=setTimeout((()=>{this.mrdSearch.emit({query:e,relatedClass:this.relatedClass})}),300)):(this.searchResults=[],this.showResults=!1,this.isLoading=!1)},this.handleResultSelect=r=>{if(this.multiple){this.selectedItems.find((e=>e.id===r.id))||(this.selectedItems=[...this.selectedItems,r]),this.searchQuery="",this.searchResults=[],this.showResults=!1;const e=this.selectedItems.map((r=>r.id));this.mrdChange.emit({name:this.name,value:e})}else this.selectedItems=[r],this.searchQuery=r.label,this.showResults=!1,this.mrdChange.emit({name:this.name,value:r.id});this.error=this.required&&!a(this.selectedItems)?d("required",this.locale):""},this.handleRemoveSelected=r=>{this.selectedItems=this.selectedItems.filter((e=>e.id!==r));const e=this.selectedItems.map((r=>r.id));this.mrdChange.emit({name:this.name,value:this.multiple?e:null})},this.handleDropdownChange=r=>{const e=r.target.value;this.error=this.required&&!a(e)?d("required",this.locale):"",this.mrdChange.emit({name:this.name,value:e})},this.handleBlur=()=>{var r,e;setTimeout((()=>{this.showResults=!1,this.highlightedIndex=-1}),200);const i=this.multiple?this.selectedItems.map((r=>r.id)):null!==(e=null===(r=this.selectedItems[0])||void 0===r?void 0:r.id)&&void 0!==e?e:null;this.mrdBlur.emit({name:this.name,value:i})}}async setSearchResults(r){this.searchResults=r,this.isLoading=!1,this.showResults=!0,this.highlightedIndex=-1}async setLoading(r){this.isLoading=r}componentWillLoad(){var r;this.value&&(Array.isArray(this.value)?this.value.length>0&&"object"==typeof this.value[0]&&(this.selectedItems=this.value,this.searchQuery=""):"object"==typeof this.value&&(this.selectedItems=[this.value],this.searchQuery=null!==(r=this.value.label)&&void 0!==r?r:""))}render(){var r,e;const i=!!this.error;if(this.displayType===s.DROPDOWN){const l=Array.isArray(this.value)?null!==(r=this.value[0])&&void 0!==r?r:"":null!==(e=this.value)&&void 0!==e?e:"";return t(o,null,t("div",{class:"mrd-relation-field"},this.label&&t("label",{class:"mrd-relation-field__label"+(this.required?" mrd-relation-field__label--required":"")},this.label),t("select",{class:"mrd-relation-field__select"+(i?" mrd-relation-field__select--error":""),name:this.name,required:this.required,disabled:this.disabled,onChange:this.handleDropdownChange},t("option",{value:""},d("select_placeholder",this.locale)),this.dropdownValues.map((r=>t("option",{key:r.value,value:r.value,selected:r.value===l},r.label)))),i&&t("span",{class:"mrd-relation-field__error"},this.error)))}const l=this.label&&t("label",{class:"mrd-relation-field__label"+(this.required?" mrd-relation-field__label--required":"")},this.label);return t(o,null,!this.multiple&&this.selectedItems.length>0?t("div",{class:"mrd-relation-field"},l,t("div",{class:"mrd-relation-field__selected-value"+(i?" mrd-relation-field__selected-value--error":"")},t("span",{class:"mrd-relation-field__selected-name"},this.selectedItems[0].label),t("button",{type:"button",class:"mrd-relation-field__selected-clear",onClick:this.clearSelection,"aria-label":d("remove",this.locale)},"✕")),i&&t("span",{class:"mrd-relation-field__error"},this.error)):t("div",{class:"mrd-relation-field"},l,this.multiple&&this.selectedItems.length>0&&t("div",{class:"mrd-relation-field__tags"},this.selectedItems.map((r=>t("span",{key:r.id,class:"mrd-relation-field__tag"},r.label,t("button",{type:"button",class:"mrd-relation-field__tag-remove",onClick:()=>this.handleRemoveSelected(r.id),"aria-label":d("remove",this.locale)},"✕"))))),t("div",{class:"mrd-relation-field__search-wrapper"},t("input",{class:"mrd-relation-field__search"+(i?" mrd-relation-field__search--error":""),type:"text",value:this.searchQuery,placeholder:d("search_placeholder",this.locale),disabled:this.disabled,onInput:this.handleSearchInput,onKeyDown:this.handleKeyDown,onBlur:this.handleBlur}),this.isLoading&&t("span",{class:"mrd-relation-field__spinner","aria-label":d("loading",this.locale)})),this.showResults&&t("div",{class:"mrd-relation-field__results"},0!==this.searchResults.length||this.isLoading?this.searchResults.map(((r,e)=>t("div",{key:r.id,class:"mrd-relation-field__result-item"+(e===this.highlightedIndex?" mrd-relation-field__result-item--highlighted":""),onMouseDown:()=>this.handleResultSelect(r)},t("span",{class:"mrd-relation-field__result-label"},r.label),r.description&&t("span",{class:"mrd-relation-field__result-desc"},r.description)))):t("div",{class:"mrd-relation-field__no-results"},d("no_results",this.locale))),i&&t("span",{class:"mrd-relation-field__error"},this.error)))}static get style(){return".sc-mrd-relation-field-h{display:block}.mrd-relation-field.sc-mrd-relation-field{display:flex;flex-direction:column;gap:var(--mrd-space-1);width:100%;position:relative}.mrd-relation-field__label.sc-mrd-relation-field{display:block;font-family:var(--mrd-font-family);font-size:var(--mrd-label-font-size);font-weight:var(--mrd-label-font-weight);color:var(--mrd-label-color)}.mrd-relation-field__label--required.sc-mrd-relation-field::after{content:' *';color:var(--mrd-color-danger)}.mrd-relation-field__select.sc-mrd-relation-field{display:block;width:100%;height:var(--mrd-input-height);padding:var(--mrd-input-padding-y) var(--mrd-input-padding-x);padding-right:calc(var(--mrd-input-padding-x) + 1.5rem);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);color:var(--mrd-input-color);background-color:var(--mrd-input-bg);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right var(--mrd-space-3) center;border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);outline:none;appearance:none;cursor:pointer;box-sizing:border-box}.mrd-relation-field__select.sc-mrd-relation-field:focus{border-color:var(--mrd-border-color-focus);box-shadow:var(--mrd-shadow-focus)}.mrd-relation-field__select.sc-mrd-relation-field:disabled{background-color:var(--mrd-input-bg-disabled);cursor:not-allowed;opacity:0.7}.mrd-relation-field__select--error.sc-mrd-relation-field{border-color:var(--mrd-border-color-error)}.mrd-relation-field__select--error.sc-mrd-relation-field:focus{box-shadow:var(--mrd-shadow-focus-error)}.mrd-relation-field__tags.sc-mrd-relation-field{display:flex;flex-wrap:wrap;gap:var(--mrd-space-1);margin-bottom:var(--mrd-space-1)}.mrd-relation-field__tag.sc-mrd-relation-field{display:inline-flex;align-items:center;gap:var(--mrd-space-1);padding:var(--mrd-space-1) var(--mrd-space-2);background-color:var(--mrd-color-primary-light);color:var(--mrd-color-primary-dark);border-radius:var(--mrd-border-radius-full);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);font-weight:var(--mrd-font-weight-medium)}.mrd-relation-field__tag-remove.sc-mrd-relation-field{background:none;border:none;cursor:pointer;color:var(--mrd-color-primary-dark);font-size:var(--mrd-font-size-xs);padding:0;line-height:1;opacity:0.7}.mrd-relation-field__tag-remove.sc-mrd-relation-field:hover{opacity:1}.mrd-relation-field__search-wrapper.sc-mrd-relation-field{position:relative;display:flex;align-items:center}.mrd-relation-field__search.sc-mrd-relation-field{display:block;width:100%;height:var(--mrd-input-height);padding:var(--mrd-input-padding-y) var(--mrd-input-padding-x);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);color:var(--mrd-input-color);background-color:var(--mrd-input-bg);border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);outline:none;appearance:none;box-sizing:border-box}.mrd-relation-field__search.sc-mrd-relation-field::placeholder{color:var(--mrd-input-placeholder-color)}.mrd-relation-field__search.sc-mrd-relation-field:focus{border-color:var(--mrd-border-color-focus);box-shadow:var(--mrd-shadow-focus)}.mrd-relation-field__search.sc-mrd-relation-field:disabled{background-color:var(--mrd-input-bg-disabled);cursor:not-allowed;opacity:0.7}.mrd-relation-field__search--error.sc-mrd-relation-field{border-color:var(--mrd-border-color-error)}.mrd-relation-field__search--error.sc-mrd-relation-field:focus{box-shadow:var(--mrd-shadow-focus-error)}.mrd-relation-field__spinner.sc-mrd-relation-field{position:absolute;right:var(--mrd-space-3);width:16px;height:16px;border:2px solid var(--mrd-color-neutral-200);border-top-color:var(--mrd-color-primary);border-radius:50%;animation:mrd-spin 0.7s linear infinite}@keyframes mrd-spin{to{transform:rotate(360deg)}}.mrd-relation-field__results.sc-mrd-relation-field{position:absolute;top:calc(100% + var(--mrd-space-1));left:0;right:0;background-color:var(--mrd-color-white);border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);box-shadow:var(--mrd-shadow-md);z-index:var(--mrd-z-dropdown);max-height:240px;overflow-y:auto}.mrd-relation-field__result-item.sc-mrd-relation-field{display:flex;flex-direction:column;padding:var(--mrd-space-2) var(--mrd-space-3);cursor:pointer;transition:background-color var(--mrd-transition-fast)}.mrd-relation-field__result-item.sc-mrd-relation-field:hover{background-color:var(--mrd-color-neutral-50)}.mrd-relation-field__result-item.sc-mrd-relation-field:not(:last-child){border-bottom:var(--mrd-border-width) solid var(--mrd-color-neutral-100)}.mrd-relation-field__result-label.sc-mrd-relation-field{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);color:var(--mrd-color-neutral-800);font-weight:var(--mrd-font-weight-medium)}.mrd-relation-field__result-desc.sc-mrd-relation-field{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-xs);color:var(--mrd-color-neutral-500);margin-top:var(--mrd-space-1)}.mrd-relation-field__result-item--highlighted.sc-mrd-relation-field{background-color:var(--mrd-color-primary-light)}.mrd-relation-field__selected-value.sc-mrd-relation-field{display:flex;align-items:center;gap:var(--mrd-space-2);height:var(--mrd-input-height);padding:var(--mrd-input-padding-y) var(--mrd-input-padding-x);background-color:var(--mrd-color-primary-light);border:var(--mrd-border-width) solid var(--mrd-color-primary);border-radius:var(--mrd-border-radius);box-sizing:border-box}.mrd-relation-field__selected-value--error.sc-mrd-relation-field{border-color:var(--mrd-border-color-error);background-color:var(--mrd-color-danger-light)}.mrd-relation-field__selected-name.sc-mrd-relation-field{flex:1;font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);font-weight:var(--mrd-font-weight-medium);color:var(--mrd-color-primary-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mrd-relation-field__selected-clear.sc-mrd-relation-field{flex-shrink:0;background:none;border:none;cursor:pointer;color:var(--mrd-color-primary-dark);font-size:var(--mrd-font-size-sm);padding:0;line-height:1;opacity:0.6;transition:opacity var(--mrd-transition-fast)}.mrd-relation-field__selected-clear.sc-mrd-relation-field:hover{opacity:1}.mrd-relation-field__no-results.sc-mrd-relation-field{padding:var(--mrd-space-4);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);color:var(--mrd-color-neutral-500);text-align:center}.mrd-relation-field__error.sc-mrd-relation-field{font-family:var(--mrd-font-family);font-size:var(--mrd-error-font-size);color:var(--mrd-error-color)}"}},[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]}]);function m(){"undefined"!=typeof customElements&&["mrd-relation-field"].forEach((r=>{"mrd-relation-field"===r&&(customElements.get(l(r))||customElements.define(l(r),n))}))}export{n as M,m as d}

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 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.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:""}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 mrd-table__row--clickable",style:{background:r%2==0?"":"var(--mrd-color-neutral-100)"},onClick:()=>this.mrdRowClick.emit(t)},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 mrd-table__row--clickable",style:{background:t%2==0?"":"var(--mrd-color-neutral-100)"},onClick:()=>this.mrdRowClick.emit(r)},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__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]}]),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}