@mmlogic/components 0.1.7 → 0.1.9

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-_tsCCkAi.js';
-import { ClientLayoutItemFieldDataType, ClientLayoutItemType, ClientLayoutItemRelationDisplayType } from './index.js';
+import { ClientLayoutItemFieldDataType, ClientLayoutItemType, ClientLayoutItemRelationDisplayType, ClientLayoutItemRelationEditBehavior } from './index.js';
 import { p as parseLocalizedNumber, d as formatNumber } from './format-Dt-aHxkM.js';
 
 const mrdBooleanFieldScss = () => `.sc-mrd-boolean-field-h{display:block}.mrd-boolean-field.sc-mrd-boolean-field{display:flex;align-items:center;width:100%}.mrd-boolean-field__toggle-label.sc-mrd-boolean-field{display:flex;align-items:center;gap:var(--mrd-space-3);cursor:pointer;user-select:none}.mrd-boolean-field__checkbox.sc-mrd-boolean-field{position:absolute;opacity:0;width:0;height:0;pointer-events:none}.mrd-boolean-field__checkbox.sc-mrd-boolean-field:checked+.mrd-boolean-field__toggle.sc-mrd-boolean-field{background-color:var(--mrd-color-primary)}.mrd-boolean-field__checkbox.sc-mrd-boolean-field:checked+.mrd-boolean-field__toggle.sc-mrd-boolean-field::after{transform:translateX(20px)}.mrd-boolean-field__checkbox.sc-mrd-boolean-field:focus+.mrd-boolean-field__toggle.sc-mrd-boolean-field{box-shadow:var(--mrd-shadow-focus)}.mrd-boolean-field__checkbox.sc-mrd-boolean-field:disabled+.mrd-boolean-field__toggle.sc-mrd-boolean-field{opacity:0.5;cursor:not-allowed}.mrd-boolean-field__toggle.sc-mrd-boolean-field{position:relative;display:inline-block;width:44px;height:24px;background-color:var(--mrd-color-neutral-300);border-radius:var(--mrd-border-radius-full);transition:background-color var(--mrd-transition);flex-shrink:0}.mrd-boolean-field__toggle.sc-mrd-boolean-field::after{content:'';position:absolute;top:2px;left:2px;width:20px;height:20px;background-color:var(--mrd-color-white);border-radius:50%;transition:transform var(--mrd-transition);box-shadow:var(--mrd-shadow-sm)}.mrd-boolean-field__text.sc-mrd-boolean-field{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);color:var(--mrd-color-neutral-800)}.mrd-boolean-field__text--required.sc-mrd-boolean-field::after{content:' *';color:var(--mrd-color-danger)}`;
@@ -334,6 +334,7 @@ const MrdField = class {
         this.mrdChange = createEvent(this, "mrdChange");
         this.mrdBlur = createEvent(this, "mrdBlur");
         this.mrdSearch = createEvent(this, "mrdSearch");
+        this.mrdFetchAll = createEvent(this, "mrdFetchAll");
         this.locale = navigator.language;
         this.handleChange = (e) => {
             e.stopPropagation();
@@ -347,13 +348,17 @@ const MrdField = class {
             e.stopPropagation();
             this.mrdSearch.emit(e.detail);
         };
+        this.handleFetchAll = (e) => {
+            e.stopPropagation();
+            this.mrdFetchAll.emit(e.detail);
+        };
     }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6;
         const { item, locale, value } = this;
         if (item.type === ClientLayoutItemType.RELATION && item.relation) {
             const rel = item.relation;
-            return (h(Host, null, h("mrd-relation-field", { name: rel.name, label: rel.label, required: rel.required, disabled: (_a = rel.disabled) !== null && _a !== void 0 ? _a : false, locale: locale, relatedClass: rel.relatedClass, mostSignificantClass: (_b = rel.mostSignificantClass) !== null && _b !== void 0 ? _b : '', displayType: (_c = rel.displayType) !== null && _c !== void 0 ? _c : ClientLayoutItemRelationDisplayType.SEARCH, multiple: (_d = rel.multiple) !== null && _d !== void 0 ? _d : false, dropdownValues: (_e = rel.dropdownValues) !== null && _e !== void 0 ? _e : [], value: value, onMrdChange: this.handleChange, onMrdBlur: this.handleBlur, onMrdSearch: this.handleSearch })));
+            return (h(Host, null, h("mrd-relation-field", { name: rel.name, label: rel.label, required: rel.required, disabled: (_a = rel.disabled) !== null && _a !== void 0 ? _a : false, locale: locale, relatedClass: rel.relatedClass, mostSignificantClass: (_b = rel.mostSignificantClass) !== null && _b !== void 0 ? _b : '', displayType: (_c = rel.displayType) !== null && _c !== void 0 ? _c : ClientLayoutItemRelationDisplayType.SEARCH, editBehavior: (_d = rel.editBehavior) !== null && _d !== void 0 ? _d : null, commonRelation: rel.commonRelation, multiple: (_e = rel.multiple) !== null && _e !== void 0 ? _e : false, dropdownValues: (_f = rel.dropdownValues) !== null && _f !== void 0 ? _f : [], value: value, onMrdChange: this.handleChange, onMrdBlur: this.handleBlur, onMrdSearch: this.handleSearch, onMrdFetchAll: this.handleFetchAll })));
         }
         if (item.type !== ClientLayoutItemType.FIELD || !item.field) {
             return h(Host, null);
@@ -363,40 +368,40 @@ const MrdField = class {
             name: field.name,
             label: field.label,
             required: field.required,
-            disabled: (_f = field.disabled) !== null && _f !== void 0 ? _f : false,
+            disabled: (_g = field.disabled) !== null && _g !== void 0 ? _g : false,
             locale,
             onMrdChange: this.handleChange,
             onMrdBlur: this.handleBlur,
         };
         switch (field.dataType) {
             case ClientLayoutItemFieldDataType.TEXT:
-                return (h(Host, null, h("mrd-text-field", Object.assign({}, commonProps, { value: (_g = value) !== null && _g !== void 0 ? _g : '', placeholder: (_h = field.placeholder) !== null && _h !== void 0 ? _h : '' }))));
+                return (h(Host, null, h("mrd-text-field", Object.assign({}, commonProps, { value: (_h = value) !== null && _h !== void 0 ? _h : '', placeholder: (_j = field.placeholder) !== null && _j !== void 0 ? _j : '' }))));
             case ClientLayoutItemFieldDataType.TEXTBLOCK:
-                return (h(Host, null, h("mrd-textarea-field", Object.assign({}, commonProps, { value: (_j = value) !== null && _j !== void 0 ? _j : '', placeholder: (_k = field.placeholder) !== null && _k !== void 0 ? _k : '' }))));
+                return (h(Host, null, h("mrd-textarea-field", Object.assign({}, commonProps, { value: (_k = value) !== null && _k !== void 0 ? _k : '', placeholder: (_l = field.placeholder) !== null && _l !== void 0 ? _l : '' }))));
             case ClientLayoutItemFieldDataType.INTEGER:
             case ClientLayoutItemFieldDataType.DECIMAL:
             case ClientLayoutItemFieldDataType.PERCENTAGE:
-                return (h(Host, null, h("mrd-number-field", Object.assign({}, commonProps, { value: (_l = value) !== null && _l !== void 0 ? _l : null, dataType: field.dataType, decimalPrecision: (_m = field.decimalPrecision) !== null && _m !== void 0 ? _m : 2, placeholder: (_o = field.placeholder) !== null && _o !== void 0 ? _o : '' }))));
+                return (h(Host, null, h("mrd-number-field", Object.assign({}, commonProps, { value: (_m = value) !== null && _m !== void 0 ? _m : null, dataType: field.dataType, decimalPrecision: (_o = field.decimalPrecision) !== null && _o !== void 0 ? _o : 2, placeholder: (_p = field.placeholder) !== null && _p !== void 0 ? _p : '' }))));
             case ClientLayoutItemFieldDataType.CURRENCY:
-                return (h(Host, null, h("mrd-currency-field", Object.assign({}, commonProps, { value: (_p = value) !== null && _p !== void 0 ? _p : { amount: null, currency: (_q = field.currencyCode) !== null && _q !== void 0 ? _q : 'EUR' } }))));
+                return (h(Host, null, h("mrd-currency-field", Object.assign({}, commonProps, { value: (_q = value) !== null && _q !== void 0 ? _q : { amount: null, currency: (_r = field.currencyCode) !== null && _r !== void 0 ? _r : 'EUR' } }))));
             case ClientLayoutItemFieldDataType.BOOLEAN:
-                return (h(Host, null, h("mrd-boolean-field", Object.assign({}, commonProps, { value: (_r = value) !== null && _r !== void 0 ? _r : false }))));
+                return (h(Host, null, h("mrd-boolean-field", Object.assign({}, commonProps, { value: (_s = value) !== null && _s !== void 0 ? _s : false }))));
             case ClientLayoutItemFieldDataType.DATE:
-                return (h(Host, null, h("mrd-date-field", Object.assign({}, commonProps, { value: (_s = value) !== null && _s !== void 0 ? _s : '' }))));
+                return (h(Host, null, h("mrd-date-field", Object.assign({}, commonProps, { value: (_t = value) !== null && _t !== void 0 ? _t : '' }))));
             case ClientLayoutItemFieldDataType.DATETIME:
-                return (h(Host, null, h("mrd-datetime-field", Object.assign({}, commonProps, { value: (_t = value) !== null && _t !== void 0 ? _t : '' }))));
+                return (h(Host, null, h("mrd-datetime-field", Object.assign({}, commonProps, { value: (_u = value) !== null && _u !== void 0 ? _u : '' }))));
             case ClientLayoutItemFieldDataType.TIME:
-                return (h(Host, null, h("mrd-time-field", Object.assign({}, commonProps, { value: (_u = value) !== null && _u !== void 0 ? _u : '' }))));
+                return (h(Host, null, h("mrd-time-field", Object.assign({}, commonProps, { value: (_v = value) !== null && _v !== void 0 ? _v : '' }))));
             case ClientLayoutItemFieldDataType.EMAIL:
-                return (h(Host, null, h("mrd-email-field", Object.assign({}, commonProps, { value: (_v = value) !== null && _v !== void 0 ? _v : '', placeholder: (_w = field.placeholder) !== null && _w !== void 0 ? _w : '' }))));
+                return (h(Host, null, h("mrd-email-field", Object.assign({}, commonProps, { value: (_w = value) !== null && _w !== void 0 ? _w : '', placeholder: (_x = field.placeholder) !== null && _x !== void 0 ? _x : '' }))));
             case ClientLayoutItemFieldDataType.HYPERLINK:
-                return (h(Host, null, h("mrd-hyperlink-field", Object.assign({}, commonProps, { value: (_x = value) !== null && _x !== void 0 ? _x : '', placeholder: (_y = field.placeholder) !== null && _y !== void 0 ? _y : '' }))));
+                return (h(Host, null, h("mrd-hyperlink-field", Object.assign({}, commonProps, { value: (_y = value) !== null && _y !== void 0 ? _y : '', placeholder: (_z = field.placeholder) !== null && _z !== void 0 ? _z : '' }))));
             case ClientLayoutItemFieldDataType.LIST:
-                return (h(Host, null, h("mrd-list-field", Object.assign({}, commonProps, { value: (_z = value) !== null && _z !== void 0 ? _z : '', multiple: (_0 = field.multiple) !== null && _0 !== void 0 ? _0 : false, listItems: (_1 = field.listItems) !== null && _1 !== void 0 ? _1 : [] }))));
+                return (h(Host, null, h("mrd-list-field", Object.assign({}, commonProps, { value: (_0 = value) !== null && _0 !== void 0 ? _0 : '', multiple: (_1 = field.multiple) !== null && _1 !== void 0 ? _1 : false, listItems: (_2 = field.listItems) !== null && _2 !== void 0 ? _2 : [] }))));
             case ClientLayoutItemFieldDataType.FILE:
-                return (h(Host, null, h("mrd-file-field", Object.assign({}, commonProps, { accept: (_2 = field.accept) !== null && _2 !== void 0 ? _2 : '', maxSize: (_3 = field.maxSize) !== null && _3 !== void 0 ? _3 : 0 }))));
+                return (h(Host, null, h("mrd-file-field", Object.assign({}, commonProps, { accept: (_3 = field.accept) !== null && _3 !== void 0 ? _3 : '', maxSize: (_4 = field.maxSize) !== null && _4 !== void 0 ? _4 : 0 }))));
             case ClientLayoutItemFieldDataType.IMAGE:
-                return (h(Host, null, h("mrd-image-field", Object.assign({}, commonProps, { accept: (_4 = field.accept) !== null && _4 !== void 0 ? _4 : 'image/*', maxSize: (_5 = field.maxSize) !== null && _5 !== void 0 ? _5 : 0 }))));
+                return (h(Host, null, h("mrd-image-field", Object.assign({}, commonProps, { accept: (_5 = field.accept) !== null && _5 !== void 0 ? _5 : 'image/*', maxSize: (_6 = field.maxSize) !== null && _6 !== void 0 ? _6 : 0 }))));
             default:
                 return h(Host, null);
         }
@@ -475,29 +480,78 @@ const MrdFileField = class {
 };
 MrdFileField.style = mrdFileFieldScss();
 
-const mrdFormScss = () => `.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)}`;
+const mrdFormScss = () => `.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;gap:var(--mrd-space-3)}.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)}.mrd-form__cancel.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:transparent;color:var(--mrd-color-neutral-600);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);font-weight:var(--mrd-font-weight-medium);border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);cursor:pointer;transition:background-color var(--mrd-transition), color var(--mrd-transition)}.mrd-form__cancel.sc-mrd-form:hover{background-color:var(--mrd-color-neutral-100);color:var(--mrd-color-neutral-800)}.mrd-form__cancel.sc-mrd-form:focus{outline:none;box-shadow:var(--mrd-shadow-focus)}.mrd-form__cancel.sc-mrd-form:active{background-color:var(--mrd-color-neutral-200)}`;
 
 const MrdForm = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.mrdSubmit = createEvent(this, "mrdSubmit");
+        this.mrdCancel = createEvent(this, "mrdCancel");
         this.mrdSearch = createEvent(this, "mrdSearch");
+        this.mrdFetchAll = createEvent(this, "mrdFetchAll");
         this.locale = navigator.language;
         this.values = {};
+        /**
+         * Absolute href of the parent/reference object (e.g. the clientAgreement href
+         * when creating an invoice from within a client agreement).
+         * Combined with `referenceClass`, mrd-form will automatically pre-fill the
+         * matching relation field so dependent DROPDOWN fields can be fetched on load
+         * — without the host app needing to know anything about the form layout.
+         */
+        /**
+         * Absolute href of the parent/reference object (e.g. the clientAgreement href
+         * when creating an invoice from within a client agreement).
+         * Combined with `referenceClass`, mrd-form will automatically pre-fill the
+         * matching relation field so dependent DROPDOWN fields can be fetched on load.
+         */
+        this.referenceHref = '';
+        /**
+         * The `mostSignificantClass` of the parent/reference object
+         * (e.g. `'clientAgreements'`). Used to locate the matching RELATION field.
+         */
+        this.referenceClass = '';
+        /** When true, a cancel button is shown next to the submit button. */
+        this.showCancel = false;
         this.formValues = {};
         this.errors = {};
         this.submitted = false;
         this.handleFieldChange = (e) => {
             const { name, value } = e.detail;
+            const prevHref = this.getHref(this.formValues[name]);
             this.formValues = Object.assign(Object.assign({}, this.formValues), { [name]: value });
             if (this.errors[name]) {
                 this.errors = Object.assign(Object.assign({}, this.errors), { [name]: '' });
             }
+            // When a field changes, check if it is the commonRelation dependency for any
+            // DROPDOWN relation. If so, reset the dependent field and re-fetch its options.
+            // Skip when the effective href did not change (e.g. mrdBlur fires after mrdChange
+            // with the same value, which would otherwise trigger a duplicate fetch).
+            const newHref = this.getHref(value);
+            if (newHref === prevHref)
+                return;
+            for (const rel of this.collectDependentDropdowns()) {
+                if (rel.commonRelation !== name)
+                    continue;
+                // Clear the dependent field's current selection (options have changed)
+                this.formValues = Object.assign(Object.assign({}, this.formValues), { [rel.name]: null });
+                this.mrdFetchAll.emit({
+                    name: rel.name,
+                    relatedClass: rel.relatedClass,
+                    mostSignificantClass: rel.mostSignificantClass,
+                    commonRelation: rel.commonRelation,
+                    filter: rel.commonRelation,
+                    filterValue: newHref, // empty string when dependency was cleared → host should clear the list
+                });
+            }
         };
         this.handleSearch = (e) => {
             e.stopPropagation();
             this.mrdSearch.emit(e.detail);
         };
+        this.handleFetchAll = (e) => {
+            e.stopPropagation();
+            this.mrdFetchAll.emit(e.detail);
+        };
         this.handleSubmit = (e) => {
             e.preventDefault();
             this.submitted = true;
@@ -510,12 +564,71 @@ const MrdForm = class {
         var _a;
         this.formValues = Object.assign({}, ((_a = this.values) !== null && _a !== void 0 ? _a : {}));
     }
+    componentDidLoad() {
+        // Apply reference pre-fill and emit mrdFetchAll for dependent DROPDOWN fields.
+        // Deferred so Angular/host prop bindings are settled before we read them.
+        setTimeout(() => {
+            this.applyReferenceValue();
+            this.emitDependentFetchAll();
+        }, 0);
+    }
     /** 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.applyReferenceValue();
         this.errors = {};
         this.submitted = false;
+        // Re-check DROPDOWN dependencies now that formValues are updated
+        setTimeout(() => this.emitDependentFetchAll(), 0);
+    }
+    /**
+     * When referenceHref + referenceClass are set, find the matching layout field
+     * and inject its value into formValues. This allows dependent DROPDOWN fields
+     * (those with commonRelation pointing to that field) to be fetched on load
+     * without the host app doing any form-domain logic.
+     *
+     * Two lookup strategies:
+     * 1. Find a RELATION whose mostSignificantClass matches referenceClass.
+     * 2. Fallback: find a DROPDOWN whose commonRelation field is absent from the
+     *    layout (API omitted it because it is implied by the reference context).
+     */
+    applyReferenceValue() {
+        if (!this.referenceHref || !this.referenceClass)
+            return;
+        const fieldName = this.resolveReferenceFieldName();
+        if (!fieldName)
+            return;
+        // Only set when not already present (don't overwrite an explicit value)
+        if (!this.formValues[fieldName]) {
+            this.formValues = Object.assign(Object.assign({}, this.formValues), { [fieldName]: this.referenceHref });
+        }
+    }
+    resolveReferenceFieldName() {
+        var _a, _b;
+        const allItems = this.collectFields((_b = (_a = this.layout) === null || _a === void 0 ? void 0 : _a.items) !== null && _b !== void 0 ? _b : []);
+        // Strategy 1: direct match on mostSignificantClass
+        const direct = allItems.find(item => {
+            var _a;
+            return item.type === ClientLayoutItemType.RELATION &&
+                ((_a = item.relation) === null || _a === void 0 ? void 0 : _a.mostSignificantClass) === this.referenceClass;
+        });
+        if (direct === null || direct === void 0 ? void 0 : direct.relation)
+            return direct.relation.name;
+        // Strategy 2: a DROPDOWN whose commonRelation field was omitted from the layout
+        const layoutRelationNames = new Set(allItems
+            .filter(item => item.type === ClientLayoutItemType.RELATION)
+            .map(item => item.relation.name));
+        for (const item of allItems) {
+            const rel = item.relation;
+            if (item.type === ClientLayoutItemType.RELATION &&
+                (rel === null || rel === void 0 ? void 0 : rel.editBehavior) === ClientLayoutItemRelationEditBehavior.DROPDOWN &&
+                rel.commonRelation &&
+                !layoutRelationNames.has(rel.commonRelation)) {
+                return rel.commonRelation;
+            }
+        }
+        return null;
     }
     async setFieldValue(name, value) {
         this.formValues = Object.assign(Object.assign({}, this.formValues), { [name]: value });
@@ -523,6 +636,45 @@ const MrdForm = class {
             this.errors = Object.assign(Object.assign({}, this.errors), { [name]: '' });
         }
     }
+    /** Collect all RELATION items that use editBehavior=DROPDOWN with a commonRelation. */
+    collectDependentDropdowns() {
+        var _a, _b;
+        return this.collectFields((_b = (_a = this.layout) === null || _a === void 0 ? void 0 : _a.items) !== null && _b !== void 0 ? _b : [])
+            .filter(item => {
+            var _a;
+            return item.type === ClientLayoutItemType.RELATION &&
+                ((_a = item.relation) === null || _a === void 0 ? void 0 : _a.editBehavior) === ClientLayoutItemRelationEditBehavior.DROPDOWN &&
+                !!item.relation.commonRelation;
+        })
+            .map(item => item.relation);
+    }
+    /** Emit mrdFetchAll for every dependent DROPDOWN whose filter value is currently set. */
+    emitDependentFetchAll() {
+        for (const rel of this.collectDependentDropdowns()) {
+            const filterValue = this.getHref(this.formValues[rel.commonRelation]);
+            if (filterValue) {
+                this.mrdFetchAll.emit({
+                    name: rel.name,
+                    relatedClass: rel.relatedClass,
+                    mostSignificantClass: rel.mostSignificantClass,
+                    commonRelation: rel.commonRelation,
+                    filter: rel.commonRelation,
+                    filterValue,
+                });
+            }
+        }
+    }
+    /** Extract a plain href string from a form value, which can be a string or
+     *  a RelationSearchResult-like object with an `id` field. */
+    getHref(value) {
+        if (!value)
+            return '';
+        if (typeof value === 'string')
+            return value;
+        if (typeof value === 'object' && 'id' in value)
+            return value.id;
+        return '';
+    }
     collectFields(items) {
         const fields = [];
         for (const item of items) {
@@ -592,7 +744,7 @@ const MrdForm = class {
             }
             const fieldName = (_d = (_b = (_a = item.field) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : (_c = item.relation) === null || _c === void 0 ? void 0 : _c.name) !== null && _d !== void 0 ? _d : '';
             const fieldValue = this.formValues[fieldName];
-            return (h("div", { class: "mrd-form__field" }, h("mrd-field", { item: item, locale: this.locale, value: fieldValue, onMrdChange: this.handleFieldChange, onMrdBlur: this.handleFieldChange, onMrdSearch: this.handleSearch }), this.errors[fieldName] && (h("span", { class: "mrd-form__field-error" }, this.errors[fieldName]))));
+            return (h("div", { class: "mrd-form__field" }, h("mrd-field", { item: item, locale: this.locale, value: fieldValue, onMrdChange: this.handleFieldChange, onMrdBlur: this.handleFieldChange, onMrdSearch: this.handleSearch, onMrdFetchAll: this.handleFetchAll }), this.errors[fieldName] && (h("span", { class: "mrd-form__field-error" }, this.errors[fieldName]))));
         });
     }
     render() {
@@ -600,7 +752,7 @@ const MrdForm = class {
             return h(Host, null);
         }
         const dir = this.locale.startsWith('ar') ? 'rtl' : 'ltr';
-        return (h(Host, null, h("form", { class: "mrd-form", dir: dir, onSubmit: this.handleSubmit, noValidate: true }, this.layout.title && h("h2", { class: "mrd-form__title" }, this.layout.title), h("div", { class: "mrd-form__body" }, this.renderItems(this.layout.items)), h("div", { class: "mrd-form__footer" }, h("button", { type: "submit", class: "mrd-form__submit" }, t('submit', this.locale))))));
+        return (h(Host, null, h("form", { class: "mrd-form", dir: dir, onSubmit: this.handleSubmit, noValidate: true }, this.layout.title && h("h2", { class: "mrd-form__title" }, this.layout.title), h("div", { class: "mrd-form__body" }, this.renderItems(this.layout.items)), h("div", { class: "mrd-form__footer" }, h("button", { type: "submit", class: "mrd-form__submit" }, t('submit', this.locale)), this.showCancel && (h("button", { type: "button", class: "mrd-form__cancel", onClick: () => this.mrdCancel.emit() }, t('cancel', this.locale)))))));
     }
     static get watchers() { return {
         "values": [{
@@ -916,6 +1068,7 @@ const MrdRelationField = class {
         this.mrdChange = createEvent(this, "mrdChange");
         this.mrdBlur = createEvent(this, "mrdBlur");
         this.mrdSearch = createEvent(this, "mrdSearch");
+        this.mrdFetchAll = createEvent(this, "mrdFetchAll");
         this.name = '';
         this.label = '';
         this.required = false;
@@ -931,6 +1084,7 @@ const MrdRelationField = class {
         this.value = null;
         this.searchQuery = '';
         this.searchResults = [];
+        this.allRecords = [];
         this.isLoading = false;
         this.selectedItems = [];
         this.showResults = false;
@@ -1039,6 +1193,9 @@ const MrdRelationField = class {
             this.mrdBlur.emit({ name: this.name, value: val });
         };
     }
+    async setAllRecords(records) {
+        this.allRecords = records;
+    }
     async setSearchResults(results) {
         this.searchResults = results;
         this.isLoading = false;
@@ -1052,24 +1209,41 @@ const MrdRelationField = class {
         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 = '';
+        if (this.value) {
+            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 : '';
             }
         }
-        else if (typeof this.value === 'object') {
-            this.selectedItems = [this.value];
-            this.searchQuery = (_a = this.value.label) !== null && _a !== void 0 ? _a : '';
+    }
+    componentDidLoad() {
+        // Only emit when there is no commonRelation dependency — the form orchestrates those.
+        if (this.editBehavior === ClientLayoutItemRelationEditBehavior.DROPDOWN && !this.commonRelation) {
+            // Defer to next tick so parent event listeners are registered after DOM patching
+            setTimeout(() => {
+                this.mrdFetchAll.emit({
+                    name: this.name,
+                    relatedClass: this.relatedClass,
+                    mostSignificantClass: this.mostSignificantClass || undefined,
+                });
+            }, 0);
         }
     }
     render() {
-        var _a, _b;
+        var _a, _b, _c, _d;
         const hasError = !!this.error;
-        if (this.displayType === ClientLayoutItemRelationDisplayType.DROPDOWN) {
+        if (this.editBehavior === ClientLayoutItemRelationEditBehavior.DROPDOWN) {
             const currentValue = Array.isArray(this.value) ? ((_a = this.value[0]) !== null && _a !== void 0 ? _a : '') : ((_b = this.value) !== null && _b !== void 0 ? _b : '');
+            return (h(Host, null, h("div", { class: "mrd-relation-field" }, this.label && (h("label", { class: `mrd-relation-field__label${this.required ? ' mrd-relation-field__label--required' : ''}` }, this.label)), h("select", { class: `mrd-relation-field__select${hasError ? ' mrd-relation-field__select--error' : ''}`, name: this.name, required: this.required, disabled: this.disabled, onChange: this.handleDropdownChange }, h("option", { value: "" }, t('select_placeholder', this.locale)), this.allRecords.map(record => (h("option", { key: record.id, value: record.id, selected: record.id === currentValue }, record.label)))), hasError && h("span", { class: "mrd-relation-field__error" }, this.error))));
+        }
+        if (this.displayType === ClientLayoutItemRelationDisplayType.DROPDOWN) {
+            const currentValue = Array.isArray(this.value) ? ((_c = this.value[0]) !== null && _c !== void 0 ? _c : '') : ((_d = this.value) !== null && _d !== void 0 ? _d : '');
             return (h(Host, null, h("div", { class: "mrd-relation-field" }, this.label && (h("label", { class: `mrd-relation-field__label${this.required ? ' mrd-relation-field__label--required' : ''}` }, this.label)), h("select", { class: `mrd-relation-field__select${hasError ? ' mrd-relation-field__select--error' : ''}`, name: this.name, required: this.required, disabled: this.disabled, onChange: this.handleDropdownChange }, h("option", { value: "" }, t('select_placeholder', this.locale)), this.dropdownValues.map(dv => (h("option", { key: dv.key, value: dv.key, selected: dv.key === currentValue }, dv.label)))), hasError && h("span", { class: "mrd-relation-field__error" }, this.error))));
         }
         // SEARCH mode

package/dist/mosterdcomponents/mosterdcomponents.esm.js

@@ -1 +1 @@
-import{p as e,b as l}from"./p-_tsCCkAi.js";export{s as setNonce}from"./p-_tsCCkAi.js";import{g as a}from"./p-DQuL1Twl.js";(()=>{const l=import.meta.url,a={};return""!==l&&(a.resourcesUrl=new URL(".",l).href),e(a)})().then((async e=>(await a(),l([["p-baf08615",[[2,"mrd-table",{columns:[16],rows:[16],locale:[1],totalElements:[2,"total-elements"],pageSize:[2,"page-size"],rowHeight:[2,"row-height"],tableHeight:[2,"table-height"],defaultSort:[1,"default-sort"],loadedPages:[32],requestedPages:[32],renderStart:[32],renderEnd:[32],colWidths:[32],sortField:[32],sortDir:[32],init:[64],setPage:[64]}]]],["p-45c40269",[[2,"mrd-form",{layout:[16],locale:[1],values:[16],formValues:[32],errors:[32],submitted:[32],setFieldValue:[64]},null,{values:[{valuesChanged:0}]}],[2,"mrd-field",{item:[16],locale:[1],value:[16]}],[2,"mrd-boolean-field",{name:[1],label:[1],value:[4],required:[4],disabled:[4],locale:[1],checked:[32]}],[2,"mrd-currency-field",{name:[1],label:[1],value:[16],required:[4],disabled:[4],locale:[1],amountDisplay:[32],currency:[32],error:[32]}],[2,"mrd-date-field",{name:[1],label:[1],value:[1],required:[4],disabled:[4],locale:[1],error:[32]}],[2,"mrd-datetime-field",{name:[1],label:[1],value:[1],required:[4],disabled:[4],locale:[1],error:[32]}],[2,"mrd-email-field",{name:[1],label:[1],value:[1],placeholder:[1],required:[4],disabled:[4],locale:[1],error:[32]}],[2,"mrd-file-field",{name:[1],label:[1],required:[4],disabled:[4],locale:[1],accept:[1],maxSize:[2,"max-size"],fileName:[32],isDragging:[32],error:[32]}],[2,"mrd-hyperlink-field",{name:[1],label:[1],value:[1],placeholder:[1],required:[4],disabled:[4],locale:[1],error:[32]}],[2,"mrd-image-field",{name:[1],label:[1],required:[4],disabled:[4],locale:[1],accept:[1],maxSize:[2,"max-size"],previewUrl:[32],fileName:[32],isDragging:[32],error:[32]}],[2,"mrd-list-field",{name:[1],label:[1],value:[1],required:[4],disabled:[4],multiple:[4],locale:[1],listItems:[16],error:[32],selected:[32]}],[2,"mrd-number-field",{name:[1],label:[1],value:[2],placeholder:[1],required:[4],disabled:[4],locale:[1],dataType:[1,"data-type"],decimalPrecision:[2,"decimal-precision"],displayValue:[32],error:[32]}],[2,"mrd-relation-field",{name:[1],label:[1],required:[4],disabled:[4],locale:[1],relatedClass:[1,"related-class"],mostSignificantClass:[1,"most-significant-class"],displayType:[1,"display-type"],multiple:[4],dropdownValues:[16],value:[1],searchQuery:[32],searchResults:[32],isLoading:[32],selectedItems:[32],showResults:[32],error:[32],highlightedIndex:[32],setSearchResults:[64],setLoading:[64]}],[2,"mrd-text-field",{name:[1],label:[1],value:[1],placeholder:[1],required:[4],disabled:[4],locale:[1],error:[32]}],[2,"mrd-textarea-field",{name:[1],label:[1],value:[1],placeholder:[1],required:[4],disabled:[4],locale:[1],error:[32],editorReady:[32]}],[2,"mrd-time-field",{name:[1],label:[1],value:[1],required:[4],disabled:[4],locale:[1],error:[32]}]]]],e))));
+import{p as e,b as l}from"./p-_tsCCkAi.js";export{s as setNonce}from"./p-_tsCCkAi.js";import{g as a}from"./p-DQuL1Twl.js";(()=>{const l=import.meta.url,a={};return""!==l&&(a.resourcesUrl=new URL(".",l).href),e(a)})().then((async e=>(await a(),l([["p-baf08615",[[2,"mrd-table",{columns:[16],rows:[16],locale:[1],totalElements:[2,"total-elements"],pageSize:[2,"page-size"],rowHeight:[2,"row-height"],tableHeight:[2,"table-height"],defaultSort:[1,"default-sort"],loadedPages:[32],requestedPages:[32],renderStart:[32],renderEnd:[32],colWidths:[32],sortField:[32],sortDir:[32],init:[64],setPage:[64]}]]],["p-2a8cb2eb",[[2,"mrd-form",{layout:[16],locale:[1],values:[16],referenceHref:[1,"reference-href"],referenceClass:[1,"reference-class"],showCancel:[4,"show-cancel"],formValues:[32],errors:[32],submitted:[32],setFieldValue:[64]},null,{values:[{valuesChanged:0}]}],[2,"mrd-field",{item:[16],locale:[1],value:[16]}],[2,"mrd-boolean-field",{name:[1],label:[1],value:[4],required:[4],disabled:[4],locale:[1],checked:[32]}],[2,"mrd-currency-field",{name:[1],label:[1],value:[16],required:[4],disabled:[4],locale:[1],amountDisplay:[32],currency:[32],error:[32]}],[2,"mrd-date-field",{name:[1],label:[1],value:[1],required:[4],disabled:[4],locale:[1],error:[32]}],[2,"mrd-datetime-field",{name:[1],label:[1],value:[1],required:[4],disabled:[4],locale:[1],error:[32]}],[2,"mrd-email-field",{name:[1],label:[1],value:[1],placeholder:[1],required:[4],disabled:[4],locale:[1],error:[32]}],[2,"mrd-file-field",{name:[1],label:[1],required:[4],disabled:[4],locale:[1],accept:[1],maxSize:[2,"max-size"],fileName:[32],isDragging:[32],error:[32]}],[2,"mrd-hyperlink-field",{name:[1],label:[1],value:[1],placeholder:[1],required:[4],disabled:[4],locale:[1],error:[32]}],[2,"mrd-image-field",{name:[1],label:[1],required:[4],disabled:[4],locale:[1],accept:[1],maxSize:[2,"max-size"],previewUrl:[32],fileName:[32],isDragging:[32],error:[32]}],[2,"mrd-list-field",{name:[1],label:[1],value:[1],required:[4],disabled:[4],multiple:[4],locale:[1],listItems:[16],error:[32],selected:[32]}],[2,"mrd-number-field",{name:[1],label:[1],value:[2],placeholder:[1],required:[4],disabled:[4],locale:[1],dataType:[1,"data-type"],decimalPrecision:[2,"decimal-precision"],displayValue:[32],error:[32]}],[2,"mrd-relation-field",{name:[1],label:[1],required:[4],disabled:[4],locale:[1],relatedClass:[1,"related-class"],mostSignificantClass:[1,"most-significant-class"],displayType:[1,"display-type"],editBehavior:[1,"edit-behavior"],commonRelation:[1,"common-relation"],multiple:[4],dropdownValues:[16],value:[1],searchQuery:[32],searchResults:[32],allRecords:[32],isLoading:[32],selectedItems:[32],showResults:[32],error:[32],highlightedIndex:[32],setAllRecords:[64],setSearchResults:[64],setLoading:[64]}],[2,"mrd-text-field",{name:[1],label:[1],value:[1],placeholder:[1],required:[4],disabled:[4],locale:[1],error:[32]}],[2,"mrd-textarea-field",{name:[1],label:[1],value:[1],placeholder:[1],required:[4],disabled:[4],locale:[1],error:[32],editorReady:[32]}],[2,"mrd-time-field",{name:[1],label:[1],value:[1],required:[4],disabled:[4],locale:[1],error:[32]}]]]],e))));