@mmlogic/components 0.1.23 → 0.1.25

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

@@ -1,1495 +0,0 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-_tsCCkAi.js';
-import { p as parseLocalizedNumber, t, d as formatNumber } from './format-CcRjWvcb.js';
-import { ClientLayoutItemFieldDataType, ClientLayoutItemType, ClientLayoutItemRelationDisplayType, ClientLayoutItemRelationEditBehavior } from './index.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)}`;
-
-const MrdBooleanField = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.mrdChange = createEvent(this, "mrdChange");
-        this.mrdBlur = createEvent(this, "mrdBlur");
-        this.name = '';
-        this.label = '';
-        this.value = false;
-        this.required = false;
-        this.disabled = false;
-        this.locale = navigator.language;
-        this.checked = false;
-        this.handleChange = (e) => {
-            this.checked = e.target.checked;
-            this.mrdChange.emit({ name: this.name, value: this.checked });
-        };
-        this.handleBlur = () => {
-            this.mrdBlur.emit({ name: this.name, value: this.checked });
-        };
-    }
-    componentWillLoad() {
-        this.checked = !!this.value;
-    }
-    render() {
-        return (h(Host, { key: 'aed1d936d686870114a12aad9fc4cccb76ecd31e' }, h("div", { key: '5cc8aaa0f12d4195d02fce8a810d7d993e2e8c99', class: "mrd-boolean-field" }, h("label", { key: '41c3b3e0f01778fc2654ba86e3fe4e5a07c8537a', class: "mrd-boolean-field__toggle-label" }, h("input", { key: 'c261e6903e050d2f3d8df8abb90c74d99ed20161', class: "mrd-boolean-field__checkbox", type: "checkbox", name: this.name, checked: this.checked, disabled: this.disabled, onChange: this.handleChange, onBlur: this.handleBlur }), h("span", { key: '079ee220fe692536af15a7fb4286626102ae940e', class: "mrd-boolean-field__toggle", "aria-hidden": "true" }), this.label && (h("span", { key: '1f4f52a41f0bd6ba4c61cf9d4db74ab2f1aa8877', class: `mrd-boolean-field__text${this.required ? ' mrd-boolean-field__text--required' : ''}` }, this.label))))));
-    }
-};
-MrdBooleanField.style = mrdBooleanFieldScss();
-
-function validateRequired(value) {
-    if (value === null || value === undefined)
-        return false;
-    if (typeof value === 'string')
-        return value.trim().length > 0;
-    if (Array.isArray(value))
-        return value.length > 0;
-    if (typeof value === 'object') {
-        // CurrencyValue check
-        const cv = value;
-        if ('amount' in cv)
-            return cv.amount !== null && cv.amount !== undefined && cv.amount !== '';
-    }
-    return true;
-}
-function validateEmail(value) {
-    if (!value)
-        return true;
-    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
-}
-function validateUrl(value) {
-    if (!value)
-        return true;
-    try {
-        new URL(value);
-        return true;
-    }
-    catch (_a) {
-        return false;
-    }
-}
-function validateNumber(value, dataType) {
-    if (value === null || value === undefined || value === '')
-        return true;
-    const num = Number(value);
-    if (isNaN(num))
-        return false;
-    if (dataType === ClientLayoutItemFieldDataType.INTEGER) {
-        return Number.isInteger(num);
-    }
-    if (dataType === ClientLayoutItemFieldDataType.PERCENTAGE) {
-        return num >= 0 && num <= 100;
-    }
-    return true;
-}
-
-const mrdCurrencyFieldScss = () => `.sc-mrd-currency-field-h{display:block}.mrd-currency-field.sc-mrd-currency-field{display:flex;flex-direction:column;gap:var(--mrd-space-1);width:100%}.mrd-currency-field__label.sc-mrd-currency-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-currency-field__label--required.sc-mrd-currency-field::after{content:' *';color:var(--mrd-color-danger)}.mrd-currency-field__row.sc-mrd-currency-field{display:flex;gap:var(--mrd-space-2);align-items:stretch}.mrd-currency-field__amount.sc-mrd-currency-field{flex:1;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);transition:border-color var(--mrd-transition), box-shadow var(--mrd-transition);outline:none;appearance:none;text-align:right;box-sizing:border-box}.mrd-currency-field__amount.sc-mrd-currency-field:focus{border-color:var(--mrd-border-color-focus);box-shadow:var(--mrd-shadow-focus)}.mrd-currency-field__amount.sc-mrd-currency-field:disabled{background-color:var(--mrd-input-bg-disabled);cursor:not-allowed;opacity:0.7}.mrd-currency-field__amount--error.sc-mrd-currency-field{border-color:var(--mrd-border-color-error)}.mrd-currency-field__amount--error.sc-mrd-currency-field:focus{box-shadow:var(--mrd-shadow-focus-error)}.mrd-currency-field__currency.sc-mrd-currency-field{width:90px;height:var(--mrd-input-height);padding:var(--mrd-input-padding-y) var(--mrd-space-2);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);font-weight:var(--mrd-font-weight-medium);color:var(--mrd-input-color);background-color:var(--mrd-color-neutral-50);border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);outline:none;cursor:pointer;box-sizing:border-box;appearance:none;text-align:center}.mrd-currency-field__currency.sc-mrd-currency-field:focus{border-color:var(--mrd-border-color-focus);box-shadow:var(--mrd-shadow-focus)}.mrd-currency-field__currency.sc-mrd-currency-field:disabled{background-color:var(--mrd-input-bg-disabled);cursor:not-allowed;opacity:0.7}.mrd-currency-field__error.sc-mrd-currency-field{font-family:var(--mrd-font-family);font-size:var(--mrd-error-font-size);color:var(--mrd-error-color)}`;
-
-const COMMON_CURRENCIES = [
-    'EUR', 'USD', 'GBP', 'CHF', 'JPY', 'CNY', 'AUD', 'CAD',
-    'SEK', 'NOK', 'DKK', 'NZD', 'SGD', 'HKD', 'PLN', 'CZK',
-    'HUF', 'MXN', 'BRL', 'INR', 'TRY', 'ZAR', 'AED', 'SAR',
-];
-const MrdCurrencyField = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.mrdChange = createEvent(this, "mrdChange");
-        this.mrdBlur = createEvent(this, "mrdBlur");
-        this.name = '';
-        this.label = '';
-        this.value = { amount: null, currency: 'EUR' };
-        this.required = false;
-        this.disabled = false;
-        this.locale = navigator.language;
-        this.amountDisplay = '';
-        this.currency = 'EUR';
-        this.error = '';
-        this.handleAmountInput = (e) => {
-            this.amountDisplay = e.target.value;
-        };
-        this.handleAmountBlur = (e) => {
-            const raw = e.target.value;
-            const parsed = parseLocalizedNumber(raw, this.locale);
-            if (this.required && !validateRequired(raw)) {
-                this.error = t('required', this.locale);
-            }
-            else {
-                this.error = '';
-            }
-            const val = { amount: parsed, currency: this.currency };
-            this.mrdChange.emit({ name: this.name, value: val });
-            this.mrdBlur.emit({ name: this.name, value: val });
-        };
-        this.handleCurrencyChange = (e) => {
-            this.currency = e.target.value;
-            const parsed = parseLocalizedNumber(this.amountDisplay, this.locale);
-            this.mrdChange.emit({ name: this.name, value: { amount: parsed, currency: this.currency } });
-        };
-    }
-    componentWillLoad() {
-        if (this.value) {
-            this.currency = this.value.currency || 'EUR';
-            this.amountDisplay = this.value.amount !== null ? String(this.value.amount) : '';
-        }
-    }
-    render() {
-        const hasError = !!this.error;
-        return (h(Host, { key: 'd3450e9c26b1a755d3e6a5a3561d93b2ac566a28' }, h("div", { key: 'b66942cc1953daff728504deef8a9cc1330ef549', class: "mrd-currency-field" }, this.label && (h("label", { key: '3d3f2f06e9ffea944552f0f7cf3150d0246c54f0', class: `mrd-currency-field__label${this.required ? ' mrd-currency-field__label--required' : ''}` }, this.label)), h("div", { key: 'd30a2adfceefdbefef2d4fe6633a163a753b15d0', class: "mrd-currency-field__row" }, h("input", { key: '9af09b19b6cbe24498d6ca8edf7b28f675afdec5', class: `mrd-currency-field__amount${hasError ? ' mrd-currency-field__amount--error' : ''}`, type: "text", inputMode: "decimal", name: `${this.name}_amount`, value: this.amountDisplay, placeholder: "0.00", required: this.required, disabled: this.disabled, onInput: this.handleAmountInput, onBlur: this.handleAmountBlur }), h("select", { key: '21e55b04b7bf16586b5cfaa82d77db45c6dedf21', class: "mrd-currency-field__currency", disabled: this.disabled, onChange: this.handleCurrencyChange }, COMMON_CURRENCIES.map(c => (h("option", { key: c, value: c, selected: c === this.currency }, c))))), hasError && h("span", { key: '7a0006d4230557cf9c58f82f21de73b5d12f7e17', class: "mrd-currency-field__error" }, this.error))));
-    }
-};
-MrdCurrencyField.style = mrdCurrencyFieldScss();
-
-const mrdDateFieldScss = () => `.sc-mrd-date-field-h{display:block}.mrd-date-field.sc-mrd-date-field{display:flex;flex-direction:column;gap:var(--mrd-space-1);width:100%}.mrd-date-field__label.sc-mrd-date-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-date-field__label--required.sc-mrd-date-field::after{content:' *';color:var(--mrd-color-danger)}.mrd-date-field__input.sc-mrd-date-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);transition:border-color var(--mrd-transition), box-shadow var(--mrd-transition);outline:none;appearance:none;box-sizing:border-box;cursor:pointer}.mrd-date-field__input.sc-mrd-date-field:focus{border-color:var(--mrd-border-color-focus);box-shadow:var(--mrd-shadow-focus)}.mrd-date-field__input.sc-mrd-date-field:disabled{background-color:var(--mrd-input-bg-disabled);cursor:not-allowed;opacity:0.7}.mrd-date-field__input--error.sc-mrd-date-field{border-color:var(--mrd-border-color-error)}.mrd-date-field__input--error.sc-mrd-date-field:focus{box-shadow:var(--mrd-shadow-focus-error)}.mrd-date-field__error.sc-mrd-date-field{font-family:var(--mrd-font-family);font-size:var(--mrd-error-font-size);color:var(--mrd-error-color)}`;
-
-const MrdDateField = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.mrdChange = createEvent(this, "mrdChange");
-        this.mrdBlur = createEvent(this, "mrdBlur");
-        this.name = '';
-        this.label = '';
-        this.value = '';
-        this.required = false;
-        this.disabled = false;
-        this.locale = navigator.language;
-        this.error = '';
-        this.handleChange = (e) => {
-            const val = e.target.value;
-            if (this.required && !validateRequired(val)) {
-                this.error = t('required', this.locale);
-            }
-            else {
-                this.error = '';
-            }
-            this.mrdChange.emit({ name: this.name, value: val });
-        };
-        this.handleBlur = (e) => {
-            const val = e.target.value;
-            this.mrdBlur.emit({ name: this.name, value: val });
-        };
-    }
-    render() {
-        const hasError = !!this.error;
-        return (h(Host, { key: '84c777fc68a95e0b1ceb08d61e3af7afa199ce94' }, h("div", { key: '6653d94ab79c74342ce792792547018e4464a814', class: "mrd-date-field" }, this.label && (h("label", { key: '2fa7b7ec50c784f9410ca48b93d50e39dc6e0bee', class: `mrd-date-field__label${this.required ? ' mrd-date-field__label--required' : ''}` }, this.label)), h("input", { key: 'f79ebbaf0e28ad7668a5400d1df514b66457b72d', class: `mrd-date-field__input${hasError ? ' mrd-date-field__input--error' : ''}`, type: "date", name: this.name, value: this.value, required: this.required, disabled: this.disabled, onChange: this.handleChange, onBlur: this.handleBlur }), hasError && h("span", { key: 'e52f0b720d76e8ba0586fb40395b6875860762db', class: "mrd-date-field__error" }, this.error))));
-    }
-};
-MrdDateField.style = mrdDateFieldScss();
-
-const mrdDatetimeFieldScss = () => `.sc-mrd-datetime-field-h{display:block}.mrd-datetime-field.sc-mrd-datetime-field{display:flex;flex-direction:column;gap:var(--mrd-space-1);width:100%}.mrd-datetime-field__label.sc-mrd-datetime-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-datetime-field__label--required.sc-mrd-datetime-field::after{content:' *';color:var(--mrd-color-danger)}.mrd-datetime-field__input.sc-mrd-datetime-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);transition:border-color var(--mrd-transition), box-shadow var(--mrd-transition);outline:none;appearance:none;box-sizing:border-box;cursor:pointer}.mrd-datetime-field__input.sc-mrd-datetime-field:focus{border-color:var(--mrd-border-color-focus);box-shadow:var(--mrd-shadow-focus)}.mrd-datetime-field__input.sc-mrd-datetime-field:disabled{background-color:var(--mrd-input-bg-disabled);cursor:not-allowed;opacity:0.7}.mrd-datetime-field__input--error.sc-mrd-datetime-field{border-color:var(--mrd-border-color-error)}.mrd-datetime-field__input--error.sc-mrd-datetime-field:focus{box-shadow:var(--mrd-shadow-focus-error)}.mrd-datetime-field__error.sc-mrd-datetime-field{font-family:var(--mrd-font-family);font-size:var(--mrd-error-font-size);color:var(--mrd-error-color)}`;
-
-const MrdDatetimeField = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.mrdChange = createEvent(this, "mrdChange");
-        this.mrdBlur = createEvent(this, "mrdBlur");
-        this.name = '';
-        this.label = '';
-        this.value = '';
-        this.required = false;
-        this.disabled = false;
-        this.locale = navigator.language;
-        this.error = '';
-        this.localValue = '';
-        this.handleChange = (e) => {
-            const localVal = e.target.value;
-            this.localValue = localVal;
-            if (this.required && !validateRequired(localVal)) {
-                this.error = t('required', this.locale);
-            }
-            else {
-                this.error = '';
-            }
-            this.mrdChange.emit({ name: this.name, value: this.localToUtc(localVal) });
-        };
-        this.handleBlur = (e) => {
-            const localVal = e.target.value;
-            this.mrdBlur.emit({ name: this.name, value: this.localToUtc(localVal) });
-        };
-    }
-    componentWillLoad() {
-        this.localValue = this.utcToLocal(this.value);
-    }
-    valueChanged(newVal) {
-        this.localValue = this.utcToLocal(newVal);
-    }
-    // UTC ISO string → "YYYY-MM-DDTHH:mm" in local timezone (for datetime-local input)
-    utcToLocal(utcStr) {
-        if (!utcStr)
-            return '';
-        const d = new Date(utcStr);
-        if (isNaN(d.getTime()))
-            return '';
-        const pad = (n) => String(n).padStart(2, '0');
-        return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
-    }
-    // "YYYY-MM-DDTHH:mm" local time → UTC ISO string (for API)
-    localToUtc(localStr) {
-        if (!localStr)
-            return '';
-        const d = new Date(localStr);
-        if (isNaN(d.getTime()))
-            return '';
-        return d.toISOString().replace(/\.\d{3}Z$/, 'Z');
-    }
-    render() {
-        const hasError = !!this.error;
-        return (h(Host, { key: '6052b08238484bee345ae4bb9b3025c7f2474c35' }, h("div", { key: 'f9073be4496e35a7d40405ae4e6a27a5c1607626', class: "mrd-datetime-field" }, this.label && (h("label", { key: '5933c3b2dfcae9bfad378441210ada6b625657a2', class: `mrd-datetime-field__label${this.required ? ' mrd-datetime-field__label--required' : ''}` }, this.label)), h("input", { key: '7a947b104c38960d2326a4877e4ca52db9fd9d84', class: `mrd-datetime-field__input${hasError ? ' mrd-datetime-field__input--error' : ''}`, type: "datetime-local", name: this.name, value: this.localValue, required: this.required, disabled: this.disabled, onChange: this.handleChange, onBlur: this.handleBlur }), hasError && h("span", { key: 'cea3dba7e14e18a3a08394ef3027b661f1808969', class: "mrd-datetime-field__error" }, this.error))));
-    }
-    static get watchers() { return {
-        "value": [{
-                "valueChanged": 0
-            }]
-    }; }
-};
-MrdDatetimeField.style = mrdDatetimeFieldScss();
-
-const mrdEmailFieldScss = () => `.sc-mrd-email-field-h{display:block}.mrd-email-field.sc-mrd-email-field{display:flex;flex-direction:column;gap:var(--mrd-space-1);width:100%}.mrd-email-field__label.sc-mrd-email-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-email-field__label--required.sc-mrd-email-field::after{content:' *';color:var(--mrd-color-danger)}.mrd-email-field__input.sc-mrd-email-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);transition:border-color var(--mrd-transition), box-shadow var(--mrd-transition);outline:none;appearance:none;box-sizing:border-box}.mrd-email-field__input.sc-mrd-email-field::placeholder{color:var(--mrd-input-placeholder-color)}.mrd-email-field__input.sc-mrd-email-field:focus{border-color:var(--mrd-border-color-focus);box-shadow:var(--mrd-shadow-focus)}.mrd-email-field__input.sc-mrd-email-field:disabled{background-color:var(--mrd-input-bg-disabled);cursor:not-allowed;opacity:0.7}.mrd-email-field__input--error.sc-mrd-email-field{border-color:var(--mrd-border-color-error)}.mrd-email-field__input--error.sc-mrd-email-field:focus{box-shadow:var(--mrd-shadow-focus-error)}.mrd-email-field__error.sc-mrd-email-field{font-family:var(--mrd-font-family);font-size:var(--mrd-error-font-size);color:var(--mrd-error-color)}`;
-
-const MrdEmailField = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.mrdChange = createEvent(this, "mrdChange");
-        this.mrdBlur = createEvent(this, "mrdBlur");
-        this.name = '';
-        this.label = '';
-        this.value = '';
-        this.placeholder = '';
-        this.required = false;
-        this.disabled = false;
-        this.locale = navigator.language;
-        this.error = '';
-        this.handleInput = (e) => {
-            const val = e.target.value;
-            this.mrdChange.emit({ name: this.name, value: val });
-        };
-        this.handleBlur = (e) => {
-            const val = e.target.value;
-            if (this.required && !validateRequired(val)) {
-                this.error = t('required', this.locale);
-            }
-            else if (val && !validateEmail(val)) {
-                this.error = t('invalid_email', this.locale);
-            }
-            else {
-                this.error = '';
-            }
-            this.mrdBlur.emit({ name: this.name, value: val });
-        };
-    }
-    render() {
-        const hasError = !!this.error;
-        return (h(Host, { key: '851ec092957ab86e811b292eaabe29d04a600fe0' }, h("div", { key: '2d8969d60378f3161656369494549d682de8ec0e', class: "mrd-email-field" }, this.label && (h("label", { key: '7a35cc60d4804097e1a54f984c7da1829f6bbd11', class: `mrd-email-field__label${this.required ? ' mrd-email-field__label--required' : ''}` }, this.label)), h("input", { key: '1fc20e860aa021886f7ed522c3a0c8dd2cb1e093', class: `mrd-email-field__input${hasError ? ' mrd-email-field__input--error' : ''}`, type: "email", name: this.name, value: this.value, placeholder: this.placeholder || 'name@example.com', required: this.required, disabled: this.disabled, onInput: this.handleInput, onBlur: this.handleBlur }), hasError && h("span", { key: 'a44b3b41b7cd6b8c643cc64e6aadd884a2ba4961', class: "mrd-email-field__error" }, this.error))));
-    }
-};
-MrdEmailField.style = mrdEmailFieldScss();
-
-const MrdField = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.mrdChange = createEvent(this, "mrdChange");
-        this.mrdBlur = createEvent(this, "mrdBlur");
-        this.mrdSearch = createEvent(this, "mrdSearch");
-        this.mrdFetchAll = createEvent(this, "mrdFetchAll");
-        this.mrdUpload = createEvent(this, "mrdUpload");
-        this.locale = navigator.language;
-        this.handleChange = (e) => {
-            e.stopPropagation();
-            this.mrdChange.emit(e.detail);
-        };
-        this.handleBlur = (e) => {
-            e.stopPropagation();
-            this.mrdBlur.emit(e.detail);
-        };
-        this.handleSearch = (e) => {
-            e.stopPropagation();
-            this.mrdSearch.emit(e.detail);
-        };
-        this.handleFetchAll = (e) => {
-            e.stopPropagation();
-            this.mrdFetchAll.emit(e.detail);
-        };
-        this.handleUpload = (e) => {
-            e.stopPropagation();
-            this.mrdUpload.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, _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, 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);
-        }
-        const field = item.field;
-        const commonProps = {
-            name: field.name,
-            label: field.label,
-            required: field.required,
-            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: (_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: (_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: (_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: (_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: (_s = value) !== null && _s !== void 0 ? _s : false }))));
-            case ClientLayoutItemFieldDataType.DATE:
-                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: (_u = value) !== null && _u !== void 0 ? _u : '' }))));
-            case ClientLayoutItemFieldDataType.TIME:
-                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: (_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: (_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: (_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, { value: value, accept: (_3 = field.accept) !== null && _3 !== void 0 ? _3 : '', maxSize: (_4 = field.maxSize) !== null && _4 !== void 0 ? _4 : 0, onMrdUpload: this.handleUpload }))));
-            case ClientLayoutItemFieldDataType.IMAGE:
-                return (h(Host, null, h("mrd-image-field", Object.assign({}, commonProps, { value: value, accept: (_5 = field.accept) !== null && _5 !== void 0 ? _5 : 'image/*', maxSize: (_6 = field.maxSize) !== null && _6 !== void 0 ? _6 : 0, onMrdUpload: this.handleUpload }))));
-            default:
-                return h(Host, null);
-        }
-    }
-};
-
-const mrdFileFieldScss = () => `.sc-mrd-file-field-h{display:block}.mrd-file-field.sc-mrd-file-field{display:flex;flex-direction:column;gap:var(--mrd-space-1);width:100%}.mrd-file-field__label.sc-mrd-file-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-file-field__label--required.sc-mrd-file-field::after{content:' *';color:var(--mrd-color-danger)}.mrd-file-field__zone.sc-mrd-file-field{display:flex;align-items:center;justify-content:center;padding:var(--mrd-space-6);border:2px dashed var(--mrd-border-color);border-radius:var(--mrd-border-radius-md);background-color:var(--mrd-color-neutral-50);cursor:pointer;transition:border-color var(--mrd-transition), background-color var(--mrd-transition);min-height:100px;position:relative}.mrd-file-field__zone.sc-mrd-file-field:hover{border-color:var(--mrd-color-primary);background-color:var(--mrd-color-primary-light)}.mrd-file-field__zone--dragging.sc-mrd-file-field{border-color:var(--mrd-color-primary);background-color:var(--mrd-color-primary-light)}.mrd-file-field__zone--error.sc-mrd-file-field{border-color:var(--mrd-border-color-error)}.mrd-file-field__zone--disabled.sc-mrd-file-field{opacity:0.6;cursor:not-allowed}.mrd-file-field__zone--disabled.sc-mrd-file-field:hover{border-color:var(--mrd-border-color);background-color:var(--mrd-color-neutral-50)}.mrd-file-field__input.sc-mrd-file-field{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;pointer-events:none}.mrd-file-field__prompt.sc-mrd-file-field{display:flex;flex-direction:column;align-items:center;gap:var(--mrd-space-2);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);color:var(--mrd-color-neutral-500);text-align:center}.mrd-file-field__upload-icon.sc-mrd-file-field{width:32px;height:32px;color:var(--mrd-color-neutral-400)}.mrd-file-field__browse.sc-mrd-file-field{color:var(--mrd-color-primary);font-weight:var(--mrd-font-weight-medium);text-decoration:underline}.mrd-file-field__selected.sc-mrd-file-field{display:flex;align-items:center;gap:var(--mrd-space-2);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);color:var(--mrd-color-neutral-700)}.mrd-file-field__icon.sc-mrd-file-field{width:20px;height:20px;color:var(--mrd-color-primary);flex-shrink:0}.mrd-file-field__filename.sc-mrd-file-field{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}.mrd-file-field__clear.sc-mrd-file-field{background:none;border:none;cursor:pointer;color:var(--mrd-color-neutral-400);font-size:var(--mrd-font-size-sm);padding:var(--mrd-space-1);border-radius:var(--mrd-border-radius-sm);line-height:1}.mrd-file-field__clear.sc-mrd-file-field:hover{color:var(--mrd-color-danger);background-color:var(--mrd-color-danger-light)}.mrd-file-field__spinner.sc-mrd-file-field{display:inline-block;flex-shrink:0;width:18px;height:18px;border:2px solid var(--mrd-color-neutral-300);border-top-color:var(--mrd-color-primary);border-radius:50%;animation:mrd-file-spin 0.6s linear infinite}@keyframes mrd-file-spin{to{transform:rotate(360deg)}}.mrd-file-field__error.sc-mrd-file-field{font-family:var(--mrd-font-family);font-size:var(--mrd-error-font-size);color:var(--mrd-error-color)}`;
-
-const MrdFileField = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.mrdChange = createEvent(this, "mrdChange");
-        this.mrdBlur = createEvent(this, "mrdBlur");
-        this.mrdUpload = createEvent(this, "mrdUpload");
-        this.name = '';
-        this.label = '';
-        this.value = null;
-        this.required = false;
-        this.disabled = false;
-        this.locale = navigator.language;
-        this.accept = '';
-        this.maxSize = 0; // bytes, 0 = no limit
-        this.fileName = '';
-        this.isDragging = false;
-        this.uploading = false;
-        this.error = '';
-        this.handleInputChange = (e) => {
-            var _a;
-            const files = e.target.files;
-            this.handleFile((_a = files === null || files === void 0 ? void 0 : files[0]) !== null && _a !== void 0 ? _a : null);
-        };
-        this.handleDragOver = (e) => {
-            e.preventDefault();
-            this.isDragging = true;
-        };
-        this.handleDragLeave = () => {
-            this.isDragging = false;
-        };
-        this.handleDrop = (e) => {
-            var _a, _b, _c;
-            e.preventDefault();
-            this.isDragging = false;
-            const file = (_c = (_b = (_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : null;
-            this.handleFile(file);
-        };
-        this.handleZoneClick = () => {
-            var _a;
-            if (!this.disabled && !this.uploading) {
-                (_a = this.fileInputRef) === null || _a === void 0 ? void 0 : _a.click();
-            }
-        };
-        this.handleClear = (e) => {
-            e.stopPropagation();
-            this.fileName = '';
-            this.error = '';
-            this.uploading = false;
-            if (this.fileInputRef)
-                this.fileInputRef.value = '';
-            this.mrdChange.emit({ name: this.name, value: null });
-        };
-    }
-    /** When the host provides a URI back via setFieldValue, the upload is done. */
-    valueChanged(newVal) {
-        if (typeof newVal === 'string' && newVal) {
-            this.uploading = false;
-        }
-        else if (!newVal) {
-            this.uploading = false;
-            this.fileName = '';
-        }
-    }
-    handleFile(file) {
-        if (!file) {
-            this.fileName = '';
-            this.uploading = false;
-            this.mrdChange.emit({ name: this.name, value: null });
-            return;
-        }
-        if (this.maxSize > 0 && file.size > this.maxSize) {
-            this.error = t('file_too_large', this.locale);
-            return;
-        }
-        this.error = '';
-        this.fileName = file.name;
-        this.uploading = true;
-        this.mrdChange.emit({ name: this.name, value: file });
-        this.mrdUpload.emit({ name: this.name, file });
-    }
-    render() {
-        const hasFile = this.uploading || (typeof this.value === 'string' && this.value) || this.fileName;
-        const hasError = !!this.error;
-        const zoneClass = [
-            'mrd-file-field__zone',
-            this.isDragging ? 'mrd-file-field__zone--dragging' : '',
-            hasError ? 'mrd-file-field__zone--error' : '',
-            this.disabled || this.uploading ? 'mrd-file-field__zone--disabled' : '',
-        ].filter(Boolean).join(' ');
-        return (h(Host, { key: '2090102df8169226c1e66f87cbc837296e4b55d4' }, h("div", { key: '7a37a09df1bfa2eaf28ed04c806ad5f7c0337bb0', class: "mrd-file-field" }, this.label && (h("label", { key: '8f1fcb8adbb66b792be902c7c548e50db99b6a53', class: `mrd-file-field__label${this.required ? ' mrd-file-field__label--required' : ''}` }, this.label)), h("div", { key: '66d992298f537b24d69ce3ead3dd229f6d124f3d', class: zoneClass, onClick: this.handleZoneClick, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("input", { key: '95ba6560e71ee08c6b2526802727b29a18cdc454', ref: el => (this.fileInputRef = el), class: "mrd-file-field__input", type: "file", name: this.name, accept: this.accept, disabled: this.disabled || this.uploading, required: this.required && !hasFile, onChange: this.handleInputChange }), hasFile ? (h("div", { class: "mrd-file-field__selected" }, this.uploading ? (h("span", { class: "mrd-file-field__spinner", "aria-label": t('loading', this.locale) })) : (h("svg", { class: "mrd-file-field__icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }), h("polyline", { points: "14 2 14 8 20 8" }))), h("span", { class: "mrd-file-field__filename" }, this.fileName), !this.uploading && (h("button", { class: "mrd-file-field__clear", type: "button", onClick: this.handleClear, "aria-label": t('clear', this.locale) }, "\u2715")))) : (h("div", { class: "mrd-file-field__prompt" }, h("svg", { class: "mrd-file-field__upload-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("polyline", { points: "16 16 12 12 8 16" }), h("line", { x1: "12", y1: "12", x2: "12", y2: "21" }), h("path", { d: "M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3" })), h("span", null, t('drop_file_here', this.locale), ' ', h("span", { class: "mrd-file-field__browse" }, t('browse', this.locale)))))), hasError && h("span", { key: 'a6020e63bebb01e31a980a903f81badd486585aa', class: "mrd-file-field__error" }, this.error))));
-    }
-    static get watchers() { return {
-        "value": [{
-                "valueChanged": 0
-            }]
-    }; }
-};
-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;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.mrdUpload = createEvent(this, "mrdUpload");
-        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.initialValues = {};
-        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 + '_href',
-                    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.handleUpload = (e) => {
-            e.stopPropagation();
-            this.mrdUpload.emit(e.detail);
-        };
-        this.handleSubmit = (e) => {
-            e.preventDefault();
-            this.submitted = true;
-            if (this.validate()) {
-                this.mrdSubmit.emit(this.buildSubmitPayload());
-            }
-        };
-    }
-    componentWillLoad() {
-        var _a, _b;
-        this.initialValues = Object.assign({}, ((_a = this.values) !== null && _a !== void 0 ? _a : {}));
-        this.formValues = Object.assign({}, ((_b = this.values) !== null && _b !== void 0 ? _b : {}));
-    }
-    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.initialValues = Object.assign({}, (newValues !== null && newValues !== void 0 ? 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 });
-        if (this.errors[name]) {
-            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 + '_href',
-                    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) {
-            if (item.type === ClientLayoutItemType.FIELD || item.type === ClientLayoutItemType.RELATION) {
-                fields.push(item);
-            }
-            if (item.items) {
-                fields.push(...this.collectFields(item.items));
-            }
-        }
-        return fields;
-    }
-    validate() {
-        var _a, _b, _c;
-        const newErrors = {};
-        const allFields = this.collectFields((_b = (_a = this.layout) === null || _a === void 0 ? void 0 : _a.items) !== null && _b !== void 0 ? _b : []);
-        for (const item of allFields) {
-            const def = (_c = item.field) !== null && _c !== void 0 ? _c : item.relation;
-            if (!def)
-                continue;
-            if (def.required && !validateRequired(this.formValues[def.name])) {
-                newErrors[def.name] = t('required', this.locale);
-            }
-        }
-        this.errors = newErrors;
-        return Object.keys(newErrors).length === 0;
-    }
-    normalizeFieldValue(value) {
-        return (value === '' || value == null) ? null : value;
-    }
-    normalizeRelationValue(value) {
-        if (value == null || value === '')
-            return null;
-        if (typeof value === 'string')
-            return value || null;
-        if (Array.isArray(value)) {
-            return value.map(v => typeof v === 'object' && v !== null && 'id' in v ? v.id : String(v));
-        }
-        if (typeof value === 'object' && 'id' in value) {
-            return value.id || null;
-        }
-        return null;
-    }
-    deepEqual(a, b) {
-        if (a === b)
-            return true;
-        if (a == null && b == null)
-            return true;
-        if (a == null || b == null)
-            return false;
-        if (Array.isArray(a) && Array.isArray(b)) {
-            if (a.length !== b.length)
-                return false;
-            const sa = [...a].sort();
-            const sb = [...b].sort();
-            return JSON.stringify(sa) === JSON.stringify(sb);
-        }
-        return JSON.stringify(a) === JSON.stringify(b);
-    }
-    /** Build a submit payload containing only fields that changed relative to
-     *  initialValues. For a new record (POST) initialValues is empty, so every
-     *  non-null field is included. For edit (PATCH) only modified fields are sent,
-     *  including fields explicitly cleared to null.
-     */
-    buildSubmitPayload() {
-        var _a, _b;
-        const payload = {};
-        const allFields = this.collectFields((_b = (_a = this.layout) === null || _a === void 0 ? void 0 : _a.items) !== null && _b !== void 0 ? _b : []);
-        for (const item of allFields) {
-            if (item.type === ClientLayoutItemType.FIELD && item.field) {
-                const name = item.field.name;
-                const value = this.formValues[name];
-                if (value instanceof File)
-                    continue;
-                const current = this.normalizeFieldValue(value);
-                const initial = this.normalizeFieldValue(this.initialValues[name]);
-                if (this.deepEqual(current, initial))
-                    continue;
-                payload[name] = current;
-            }
-            else if (item.type === ClientLayoutItemType.RELATION && item.relation) {
-                const name = item.relation.name;
-                const current = this.normalizeRelationValue(this.formValues[name]);
-                const initial = this.normalizeRelationValue(this.initialValues[name]);
-                if (this.deepEqual(current, initial))
-                    continue;
-                payload[name] = current;
-            }
-        }
-        return payload;
-    }
-    renderItems(items) {
-        return items.map(item => {
-            var _a, _b, _c, _d;
-            if (item.type === ClientLayoutItemType.SECTION) {
-                return (h("fieldset", { class: "mrd-form__section" }, item.label && h("legend", { class: "mrd-form__section-legend" }, item.label), h("div", { class: "mrd-form__section-body" }, item.items && this.renderItems(item.items))));
-            }
-            if (item.type === ClientLayoutItemType.GROUP) {
-                return (h("div", { class: "mrd-form__group" }, item.label && h("div", { class: "mrd-form__group-label" }, item.label), h("div", { class: "mrd-form__group-body" }, item.items && this.renderItems(item.items))));
-            }
-            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, onMrdFetchAll: this.handleFetchAll, onMrdUpload: this.handleUpload }), this.errors[fieldName] && (h("span", { class: "mrd-form__field-error" }, this.errors[fieldName]))));
-        });
-    }
-    render() {
-        if (!this.layout) {
-            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)), this.showCancel && (h("button", { type: "button", class: "mrd-form__cancel", onClick: () => this.mrdCancel.emit() }, t('cancel', this.locale)))))));
-    }
-    static get watchers() { return {
-        "values": [{
-                "valuesChanged": 0
-            }]
-    }; }
-};
-MrdForm.style = mrdFormScss();
-
-const mrdHyperlinkFieldScss = () => `.sc-mrd-hyperlink-field-h{display:block}.mrd-hyperlink-field.sc-mrd-hyperlink-field{display:flex;flex-direction:column;gap:var(--mrd-space-1);width:100%}.mrd-hyperlink-field__label.sc-mrd-hyperlink-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-hyperlink-field__label--required.sc-mrd-hyperlink-field::after{content:' *';color:var(--mrd-color-danger)}.mrd-hyperlink-field__input.sc-mrd-hyperlink-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);transition:border-color var(--mrd-transition), box-shadow var(--mrd-transition);outline:none;appearance:none;box-sizing:border-box}.mrd-hyperlink-field__input.sc-mrd-hyperlink-field::placeholder{color:var(--mrd-input-placeholder-color)}.mrd-hyperlink-field__input.sc-mrd-hyperlink-field:focus{border-color:var(--mrd-border-color-focus);box-shadow:var(--mrd-shadow-focus)}.mrd-hyperlink-field__input.sc-mrd-hyperlink-field:disabled{background-color:var(--mrd-input-bg-disabled);cursor:not-allowed;opacity:0.7}.mrd-hyperlink-field__input--error.sc-mrd-hyperlink-field{border-color:var(--mrd-border-color-error)}.mrd-hyperlink-field__input--error.sc-mrd-hyperlink-field:focus{box-shadow:var(--mrd-shadow-focus-error)}.mrd-hyperlink-field__error.sc-mrd-hyperlink-field{font-family:var(--mrd-font-family);font-size:var(--mrd-error-font-size);color:var(--mrd-error-color)}`;
-
-const MrdHyperlinkField = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.mrdChange = createEvent(this, "mrdChange");
-        this.mrdBlur = createEvent(this, "mrdBlur");
-        this.name = '';
-        this.label = '';
-        this.value = '';
-        this.placeholder = '';
-        this.required = false;
-        this.disabled = false;
-        this.locale = navigator.language;
-        this.error = '';
-        this.handleInput = (e) => {
-            const val = e.target.value;
-            this.mrdChange.emit({ name: this.name, value: val });
-        };
-        this.handleBlur = (e) => {
-            const val = e.target.value;
-            if (this.required && !validateRequired(val)) {
-                this.error = t('required', this.locale);
-            }
-            else if (val && !validateUrl(val)) {
-                this.error = t('invalid_url', this.locale);
-            }
-            else {
-                this.error = '';
-            }
-            this.mrdBlur.emit({ name: this.name, value: val });
-        };
-    }
-    render() {
-        const hasError = !!this.error;
-        return (h(Host, { key: '4f642cb037c6e25786593dbf0cbead71ce34580c' }, h("div", { key: 'c679d95924bc2d22089c435ec15a35132a4a062d', class: "mrd-hyperlink-field" }, this.label && (h("label", { key: 'b391dd2d152c68fe75517926c40779313a23b9d9', class: `mrd-hyperlink-field__label${this.required ? ' mrd-hyperlink-field__label--required' : ''}` }, this.label)), h("input", { key: 'ea0d2aba8520ecbde4df8e4507e0f16bd497baa9', class: `mrd-hyperlink-field__input${hasError ? ' mrd-hyperlink-field__input--error' : ''}`, type: "url", name: this.name, value: this.value, placeholder: this.placeholder || 'https://', required: this.required, disabled: this.disabled, onInput: this.handleInput, onBlur: this.handleBlur }), hasError && h("span", { key: 'fab1d90c726b69c6c43c7997fd1b7480678c2c78', class: "mrd-hyperlink-field__error" }, this.error))));
-    }
-};
-MrdHyperlinkField.style = mrdHyperlinkFieldScss();
-
-const mrdImageFieldScss = () => `.sc-mrd-image-field-h{display:block}.mrd-image-field.sc-mrd-image-field{display:flex;flex-direction:column;gap:var(--mrd-space-1);width:100%}.mrd-image-field__label.sc-mrd-image-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-image-field__label--required.sc-mrd-image-field::after{content:' *';color:var(--mrd-color-danger)}.mrd-image-field__zone.sc-mrd-image-field{display:flex;align-items:center;justify-content:center;border:2px dashed var(--mrd-border-color);border-radius:var(--mrd-border-radius-md);background-color:var(--mrd-color-neutral-50);cursor:pointer;transition:border-color var(--mrd-transition), background-color var(--mrd-transition);min-height:100px;position:relative}.mrd-image-field__zone.sc-mrd-image-field:hover{border-color:var(--mrd-color-primary);background-color:var(--mrd-color-primary-light)}.mrd-image-field__zone--dragging.sc-mrd-image-field{border-color:var(--mrd-color-primary);background-color:var(--mrd-color-primary-light)}.mrd-image-field__zone--error.sc-mrd-image-field{border-color:var(--mrd-border-color-error)}.mrd-image-field__zone--disabled.sc-mrd-image-field{opacity:0.6;cursor:not-allowed}.mrd-image-field__zone--disabled.sc-mrd-image-field:hover{border-color:var(--mrd-border-color);background-color:var(--mrd-color-neutral-50)}.mrd-image-field__input.sc-mrd-image-field{position:absolute;inset:0;opacity:0;width:100%;height:100%;pointer-events:none}.mrd-image-field__prompt.sc-mrd-image-field{display:flex;flex-direction:column;align-items:center;gap:var(--mrd-space-2);padding:var(--mrd-space-6);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);color:var(--mrd-color-neutral-500);text-align:center}.mrd-image-field__upload-icon.sc-mrd-image-field{width:40px;height:40px;color:var(--mrd-color-neutral-400)}.mrd-image-field__browse.sc-mrd-image-field{color:var(--mrd-color-primary);font-weight:var(--mrd-font-weight-medium);text-decoration:underline}.mrd-image-field__preview-container.sc-mrd-image-field{display:flex;align-items:center;gap:var(--mrd-space-4);padding:var(--mrd-space-4);width:100%}.mrd-image-field__preview-thumb.sc-mrd-image-field{flex-shrink:0;width:80px;height:80px;border-radius:var(--mrd-border-radius);overflow:hidden;border:var(--mrd-border-width) solid var(--mrd-border-color);background-color:var(--mrd-color-neutral-100)}.mrd-image-field__preview.sc-mrd-image-field{width:100%;height:100%;object-fit:cover;display:block}.mrd-image-field__preview-info.sc-mrd-image-field{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--mrd-space-1)}.mrd-image-field__preview-name.sc-mrd-image-field{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);font-weight:var(--mrd-font-weight-medium);color:var(--mrd-color-neutral-800);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mrd-image-field__preview-overlay.sc-mrd-image-field{position:absolute;inset:0;background:rgb(255 255 255 / 0.7);display:flex;align-items:center;justify-content:center;border-radius:var(--mrd-border-radius)}.mrd-image-field__spinner.sc-mrd-image-field{display:inline-block;width:24px;height:24px;border:2px solid var(--mrd-color-neutral-300);border-top-color:var(--mrd-color-primary);border-radius:50%;animation:mrd-image-spin 0.6s linear infinite}@keyframes mrd-image-spin{to{transform:rotate(360deg)}}.mrd-image-field__upload-status.sc-mrd-image-field{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-xs);color:var(--mrd-color-neutral-500)}.mrd-image-field__clear.sc-mrd-image-field{flex-shrink:0;background-color:var(--mrd-color-white);color:var(--mrd-color-danger);border:var(--mrd-border-width) solid var(--mrd-color-danger);border-radius:var(--mrd-border-radius);padding:var(--mrd-space-1) var(--mrd-space-3);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);font-weight:var(--mrd-font-weight-medium);cursor:pointer;transition:background-color var(--mrd-transition), color var(--mrd-transition)}.mrd-image-field__clear.sc-mrd-image-field:hover{background-color:var(--mrd-color-danger);color:var(--mrd-color-white)}.mrd-image-field__error.sc-mrd-image-field{font-family:var(--mrd-font-family);font-size:var(--mrd-error-font-size);color:var(--mrd-error-color)}`;
-
-const MrdImageField = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.mrdChange = createEvent(this, "mrdChange");
-        this.mrdBlur = createEvent(this, "mrdBlur");
-        this.mrdUpload = createEvent(this, "mrdUpload");
-        this.name = '';
-        this.label = '';
-        this.value = null;
-        this.required = false;
-        this.disabled = false;
-        this.locale = navigator.language;
-        this.accept = 'image/*';
-        this.maxSize = 0;
-        this.previewUrl = '';
-        this.fileName = '';
-        this.isDragging = false;
-        this.uploading = false;
-        this.error = '';
-        this.handleInputChange = (e) => {
-            var _a;
-            const files = e.target.files;
-            this.handleFile((_a = files === null || files === void 0 ? void 0 : files[0]) !== null && _a !== void 0 ? _a : null);
-        };
-        this.handleDragOver = (e) => {
-            e.preventDefault();
-            this.isDragging = true;
-        };
-        this.handleDragLeave = () => {
-            this.isDragging = false;
-        };
-        this.handleDrop = (e) => {
-            var _a, _b, _c;
-            e.preventDefault();
-            this.isDragging = false;
-            const file = (_c = (_b = (_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : null;
-            this.handleFile(file);
-        };
-        this.handleZoneClick = () => {
-            var _a;
-            if (!this.disabled && !this.uploading) {
-                (_a = this.fileInputRef) === null || _a === void 0 ? void 0 : _a.click();
-            }
-        };
-        this.handleClear = (e) => {
-            e.stopPropagation();
-            this.previewUrl = '';
-            this.fileName = '';
-            this.error = '';
-            this.uploading = false;
-            if (this.fileInputRef)
-                this.fileInputRef.value = '';
-            this.mrdChange.emit({ name: this.name, value: null });
-        };
-    }
-    /** When the host provides a URI back via setFieldValue, the upload is done. */
-    valueChanged(newVal) {
-        if (typeof newVal === 'string' && newVal) {
-            this.uploading = false;
-        }
-        else if (!newVal) {
-            this.uploading = false;
-            this.previewUrl = '';
-            this.fileName = '';
-        }
-    }
-    handleFile(file) {
-        if (!file) {
-            this.previewUrl = '';
-            this.fileName = '';
-            this.uploading = false;
-            this.mrdChange.emit({ name: this.name, value: null });
-            return;
-        }
-        if (this.maxSize > 0 && file.size > this.maxSize) {
-            this.error = t('file_too_large', this.locale);
-            return;
-        }
-        if (!file.type.startsWith('image/')) {
-            this.error = 'Please select an image file';
-            return;
-        }
-        this.error = '';
-        this.fileName = file.name;
-        this.uploading = true;
-        // Show local preview immediately while upload is in progress
-        const reader = new FileReader();
-        reader.onload = (ev) => {
-            var _a;
-            this.previewUrl = (_a = ev.target) === null || _a === void 0 ? void 0 : _a.result;
-        };
-        reader.readAsDataURL(file);
-        this.mrdChange.emit({ name: this.name, value: file });
-        this.mrdUpload.emit({ name: this.name, file });
-    }
-    render() {
-        const hasError = !!this.error;
-        const zoneClass = [
-            'mrd-image-field__zone',
-            this.isDragging ? 'mrd-image-field__zone--dragging' : '',
-            hasError ? 'mrd-image-field__zone--error' : '',
-            this.disabled || this.uploading ? 'mrd-image-field__zone--disabled' : '',
-        ].filter(Boolean).join(' ');
-        return (h(Host, { key: '76b5a36a7f5a420ded3400c8a1481843363d1cbe' }, h("div", { key: '3544df84aaf427a25518bafe13d60cf89ed28537', class: "mrd-image-field" }, this.label && (h("label", { key: 'dca64c1600cb98526eb4b91a908106087f099ad1', class: `mrd-image-field__label${this.required ? ' mrd-image-field__label--required' : ''}` }, this.label)), h("div", { key: 'ce07f32126f0956e47ff6fc41ff231590e0503d3', class: zoneClass, onClick: this.handleZoneClick, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("input", { key: '660fbae5f730834c465522a11dd674fc8e50a54e', ref: el => (this.fileInputRef = el), class: "mrd-image-field__input", type: "file", name: this.name, accept: this.accept, disabled: this.disabled || this.uploading, required: this.required && !this.previewUrl, onChange: this.handleInputChange }), this.previewUrl ? (h("div", { class: "mrd-image-field__preview-container" }, h("div", { class: "mrd-image-field__preview-thumb" }, h("img", { class: "mrd-image-field__preview", src: this.previewUrl, alt: this.fileName }), this.uploading && h("div", { class: "mrd-image-field__preview-overlay" }, h("span", { class: "mrd-image-field__spinner" }))), h("div", { class: "mrd-image-field__preview-info" }, h("span", { class: "mrd-image-field__preview-name" }, this.fileName), this.uploading && (h("span", { class: "mrd-image-field__upload-status" }, t('loading', this.locale)))), !this.uploading && (h("button", { class: "mrd-image-field__clear", type: "button", onClick: this.handleClear, "aria-label": t('clear', this.locale) }, t('remove', this.locale))))) : (h("div", { class: "mrd-image-field__prompt" }, h("svg", { class: "mrd-image-field__upload-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }), h("circle", { cx: "8.5", cy: "8.5", r: "1.5" }), h("polyline", { points: "21 15 16 10 5 21" })), h("span", null, t('drop_file_here', this.locale), ' ', h("span", { class: "mrd-image-field__browse" }, t('browse', this.locale)))))), hasError && h("span", { key: '9b8f9563fea63bd12c38f5c480e9cbd24106c3af', class: "mrd-image-field__error" }, this.error))));
-    }
-    static get watchers() { return {
-        "value": [{
-                "valueChanged": 0
-            }]
-    }; }
-};
-MrdImageField.style = mrdImageFieldScss();
-
-const mrdListFieldScss = () => `.sc-mrd-list-field-h{display:block}.mrd-list-field.sc-mrd-list-field{display:flex;flex-direction:column;gap:var(--mrd-space-1);width:100%}.mrd-list-field__label.sc-mrd-list-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-list-field__label--required.sc-mrd-list-field::after{content:' *';color:var(--mrd-color-danger)}.mrd-list-field__select.sc-mrd-list-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);transition:border-color var(--mrd-transition), box-shadow var(--mrd-transition);outline:none;appearance:none;cursor:pointer;box-sizing:border-box}.mrd-list-field__select.sc-mrd-list-field:focus{border-color:var(--mrd-border-color-focus);box-shadow:var(--mrd-shadow-focus)}.mrd-list-field__select.sc-mrd-list-field:disabled{background-color:var(--mrd-input-bg-disabled);cursor:not-allowed;opacity:0.7}.mrd-list-field__select--error.sc-mrd-list-field{border-color:var(--mrd-border-color-error)}.mrd-list-field__select--error.sc-mrd-list-field:focus{box-shadow:var(--mrd-shadow-focus-error)}.mrd-list-field__checkbox-list.sc-mrd-list-field{display:flex;flex-direction:column;gap:var(--mrd-space-2);padding:var(--mrd-space-3);border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);background-color:var(--mrd-input-bg)}.mrd-list-field__checkbox-list--error.sc-mrd-list-field{border-color:var(--mrd-border-color-error)}.mrd-list-field__checkbox-item.sc-mrd-list-field{display:flex;align-items:center;gap:var(--mrd-space-2);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);color:var(--mrd-input-color);cursor:pointer}.mrd-list-field__checkbox-item.sc-mrd-list-field input[type='checkbox'].sc-mrd-list-field{width:1rem;height:1rem;cursor:pointer;accent-color:var(--mrd-color-primary)}.mrd-list-field__color-dot.sc-mrd-list-field{display:inline-block;width:12px;height:12px;border-radius:50%;flex-shrink:0}.mrd-list-field__error.sc-mrd-list-field{font-family:var(--mrd-font-family);font-size:var(--mrd-error-font-size);color:var(--mrd-error-color)}`;
-
-const MrdListField = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.mrdChange = createEvent(this, "mrdChange");
-        this.mrdBlur = createEvent(this, "mrdBlur");
-        this.name = '';
-        this.label = '';
-        this.value = '';
-        this.required = false;
-        this.disabled = false;
-        this.multiple = false;
-        this.locale = navigator.language;
-        /** List items from the API. Each item has a `key` (stored value) and `label`. */
-        this.listItems = [];
-        this.error = '';
-        this.selected = [];
-        this.handleSelectChange = (e) => {
-            const select = e.target;
-            if (this.multiple) {
-                const vals = Array.from(select.selectedOptions).map(o => o.value);
-                this.selected = vals;
-                if (this.required && !validateRequired(vals)) {
-                    this.error = t('required', this.locale);
-                }
-                else {
-                    this.error = '';
-                }
-                this.mrdChange.emit({ name: this.name, value: vals });
-            }
-            else {
-                const val = select.value;
-                if (this.required && !validateRequired(val)) {
-                    this.error = t('required', this.locale);
-                }
-                else {
-                    this.error = '';
-                }
-                this.mrdChange.emit({ name: this.name, value: val });
-            }
-        };
-        this.handleBlur = () => {
-            const val = this.multiple ? this.selected : this.value;
-            this.mrdBlur.emit({ name: this.name, value: val });
-        };
-        this.toggleCheckbox = (key) => {
-            if (this.selected.includes(key)) {
-                this.selected = this.selected.filter(v => v !== key);
-            }
-            else {
-                this.selected = [...this.selected, key];
-            }
-            if (this.required && !validateRequired(this.selected)) {
-                this.error = t('required', this.locale);
-            }
-            else {
-                this.error = '';
-            }
-            this.mrdChange.emit({ name: this.name, value: this.selected });
-        };
-    }
-    componentWillLoad() {
-        if (this.multiple) {
-            this.selected = Array.isArray(this.value) ? this.value : this.value ? [this.value] : [];
-        }
-    }
-    getContrastColor(bgColor) {
-        if (!bgColor)
-            return '#000000';
-        const hex = bgColor.replace('#', '');
-        const r = parseInt(hex.substr(0, 2), 16);
-        const g = parseInt(hex.substr(2, 2), 16);
-        const b = parseInt(hex.substr(4, 2), 16);
-        const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
-        return luminance > 0.5 ? '#000000' : '#ffffff';
-    }
-    render() {
-        var _a, _b;
-        const hasError = !!this.error;
-        const currentValue = Array.isArray(this.value) ? ((_a = this.value[0]) !== null && _a !== void 0 ? _a : '') : ((_b = this.value) !== null && _b !== void 0 ? _b : '');
-        if (this.multiple) {
-            return (h(Host, null, h("div", { class: "mrd-list-field" }, this.label && (h("label", { class: `mrd-list-field__label${this.required ? ' mrd-list-field__label--required' : ''}` }, this.label)), h("div", { class: `mrd-list-field__checkbox-list${hasError ? ' mrd-list-field__checkbox-list--error' : ''}` }, this.listItems.map(lv => {
-                var _a, _b;
-                return (h("label", { key: lv.key, class: "mrd-list-field__checkbox-item" }, h("input", { type: "checkbox", checked: this.selected.includes(lv.key), disabled: this.disabled, onChange: () => this.toggleCheckbox(lv.key) }), (lv.color || lv.backgroundColor) && (h("span", { class: "mrd-list-field__color-dot", style: { backgroundColor: (_b = (_a = lv.backgroundColor) !== null && _a !== void 0 ? _a : lv.color) !== null && _b !== void 0 ? _b : '' } })), h("span", null, lv.label)));
-            })), hasError && h("span", { class: "mrd-list-field__error" }, this.error))));
-        }
-        return (h(Host, null, h("div", { class: "mrd-list-field" }, this.label && (h("label", { class: `mrd-list-field__label${this.required ? ' mrd-list-field__label--required' : ''}` }, this.label)), h("select", { class: `mrd-list-field__select${hasError ? ' mrd-list-field__select--error' : ''}`, name: this.name, required: this.required, disabled: this.disabled, onChange: this.handleSelectChange, onBlur: this.handleBlur }, h("option", { value: "" }, t('select_placeholder', this.locale)), this.listItems.map(lv => {
-            var _a, _b;
-            const bg = (_b = (_a = lv.backgroundColor) !== null && _a !== void 0 ? _a : lv.color) !== null && _b !== void 0 ? _b : null;
-            const style = bg ? { backgroundColor: bg, color: this.getContrastColor(bg) } : {};
-            return (h("option", { key: lv.key, value: lv.key, selected: lv.key === currentValue, style: style }, lv.label));
-        })), hasError && h("span", { class: "mrd-list-field__error" }, this.error))));
-    }
-};
-MrdListField.style = mrdListFieldScss();
-
-const mrdNumberFieldScss = () => `.sc-mrd-number-field-h{display:block}.mrd-number-field.sc-mrd-number-field{display:flex;flex-direction:column;gap:var(--mrd-space-1);width:100%}.mrd-number-field__label.sc-mrd-number-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-number-field__label--required.sc-mrd-number-field::after{content:' *';color:var(--mrd-color-danger)}.mrd-number-field__input-wrapper.sc-mrd-number-field{position:relative;display:flex;align-items:center}.mrd-number-field__input.sc-mrd-number-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);transition:border-color var(--mrd-transition), box-shadow var(--mrd-transition);outline:none;appearance:none;box-sizing:border-box;text-align:right}.mrd-number-field__input.sc-mrd-number-field::placeholder{color:var(--mrd-input-placeholder-color);text-align:left}.mrd-number-field__input.sc-mrd-number-field:focus{border-color:var(--mrd-border-color-focus);box-shadow:var(--mrd-shadow-focus)}.mrd-number-field__input.sc-mrd-number-field:disabled{background-color:var(--mrd-input-bg-disabled);cursor:not-allowed;opacity:0.7}.mrd-number-field__input--error.sc-mrd-number-field{border-color:var(--mrd-border-color-error)}.mrd-number-field__input--error.sc-mrd-number-field:focus{box-shadow:var(--mrd-shadow-focus-error)}.mrd-number-field__error.sc-mrd-number-field{font-family:var(--mrd-font-family);font-size:var(--mrd-error-font-size);color:var(--mrd-error-color)}`;
-
-const MrdNumberField = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.mrdChange = createEvent(this, "mrdChange");
-        this.mrdBlur = createEvent(this, "mrdBlur");
-        this.name = '';
-        this.label = '';
-        this.value = null;
-        this.placeholder = '';
-        this.required = false;
-        this.disabled = false;
-        this.locale = navigator.language;
-        this.dataType = ClientLayoutItemFieldDataType.INTEGER;
-        this.decimalPrecision = 2;
-        this.displayValue = '';
-        this.error = '';
-        this.handleInput = (e) => {
-            this.displayValue = e.target.value;
-        };
-        this.handleBlur = (e) => {
-            const raw = e.target.value;
-            const parsed = parseLocalizedNumber(raw, this.locale);
-            if (this.required && (parsed === null || raw === '')) {
-                this.error = t('required', this.locale);
-            }
-            else if (raw !== '' && !validateNumber(parsed, this.dataType)) {
-                this.error = t('invalid_number', this.locale);
-            }
-            else {
-                this.error = '';
-            }
-            if (parsed !== null && validateRequired(raw)) {
-                this.displayValue = this.formatForDisplay(parsed);
-            }
-            this.mrdChange.emit({ name: this.name, value: parsed });
-            this.mrdBlur.emit({ name: this.name, value: parsed });
-        };
-        this.handleFocus = () => {
-            // Show raw number on focus
-            if (this.value !== null && this.value !== undefined) {
-                const str = String(this.value);
-                this.displayValue = str;
-            }
-        };
-    }
-    componentWillLoad() {
-        if (this.value !== null && this.value !== undefined) {
-            this.displayValue = this.formatForDisplay(this.value);
-        }
-    }
-    formatForDisplay(val) {
-        if (this.dataType === ClientLayoutItemFieldDataType.PERCENTAGE) {
-            return formatNumber(val, this.locale, {
-                minimumFractionDigits: 0,
-                maximumFractionDigits: this.decimalPrecision,
-            }) + '%';
-        }
-        if (this.dataType === ClientLayoutItemFieldDataType.DECIMAL) {
-            return formatNumber(val, this.locale, {
-                minimumFractionDigits: this.decimalPrecision,
-                maximumFractionDigits: this.decimalPrecision,
-            });
-        }
-        return formatNumber(val, this.locale, { maximumFractionDigits: 0 });
-    }
-    render() {
-        const hasError = !!this.error;
-        const suffix = this.dataType === ClientLayoutItemFieldDataType.PERCENTAGE ? '%' :
-            this.dataType === ClientLayoutItemFieldDataType.DECIMAL ? '' : '';
-        return (h(Host, { key: '68d81012d9180dde4160a507121b83f04698834a' }, h("div", { key: 'b8e46f6d23527b2c95ad2738fc63a07adfce4fda', class: "mrd-number-field" }, this.label && (h("label", { key: 'c3271c7a8adfd8bcb3b4f51e580239f928a354a5', class: `mrd-number-field__label${this.required ? ' mrd-number-field__label--required' : ''}` }, this.label)), h("div", { key: 'c46b69affd1e22c539511f6743b6d23fe73fb079', class: "mrd-number-field__input-wrapper" }, h("input", { key: 'e68188829c2e03c947c5605332a2681de550a0d5', class: `mrd-number-field__input${hasError ? ' mrd-number-field__input--error' : ''}`, type: "text", inputMode: "decimal", name: this.name, value: this.displayValue, placeholder: this.placeholder || (suffix ? `0${suffix}` : '0'), required: this.required, disabled: this.disabled, onInput: this.handleInput, onBlur: this.handleBlur, onFocus: this.handleFocus })), hasError && h("span", { key: 'bdc2723e2547517765bd64ad70c5103c7a2b363c', class: "mrd-number-field__error" }, this.error))));
-    }
-};
-MrdNumberField.style = mrdNumberFieldScss();
-
-const mrdRelationFieldScss = () => `.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)}`;
-
-const MrdRelationField = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        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;
-        this.disabled = false;
-        this.locale = navigator.language;
-        this.relatedClass = '';
-        /** When set, used instead of relatedClass for search queries (mostSignificantClass from API). */
-        this.mostSignificantClass = '';
-        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 = [];
-        this.allRecords = [];
-        this.isLoading = false;
-        this.selectedItems = [];
-        this.showResults = false;
-        this.error = '';
-        this.highlightedIndex = -1;
-        this.searchDebounce = null;
-        this.handleKeyDown = (e) => {
-            if (!this.showResults || this.searchResults.length === 0) {
-                if (e.key === 'Escape') {
-                    this.showResults = false;
-                    this.highlightedIndex = -1;
-                }
-                return;
-            }
-            if (e.key === 'ArrowDown') {
-                e.preventDefault();
-                this.highlightedIndex = Math.min(this.highlightedIndex + 1, this.searchResults.length - 1);
-            }
-            else if (e.key === 'ArrowUp') {
-                e.preventDefault();
-                this.highlightedIndex = Math.max(this.highlightedIndex - 1, 0);
-            }
-            else if (e.key === 'Enter') {
-                e.preventDefault();
-                if (this.highlightedIndex >= 0) {
-                    this.handleResultSelect(this.searchResults[this.highlightedIndex]);
-                }
-            }
-            else if (e.key === 'Escape') {
-                this.showResults = false;
-                this.highlightedIndex = -1;
-            }
-        };
-        this.clearSelection = () => {
-            this.selectedItems = [];
-            this.searchQuery = '';
-            this.searchResults = [];
-            this.showResults = false;
-            this.highlightedIndex = -1;
-            this.mrdChange.emit({ name: this.name, value: this.multiple ? [] : null });
-        };
-        this.handleSearchInput = (e) => {
-            const query = e.target.value;
-            this.searchQuery = query;
-            if (this.searchDebounce)
-                clearTimeout(this.searchDebounce);
-            if (query.trim().length >= 2) {
-                this.isLoading = true;
-                this.showResults = true;
-                this.searchDebounce = setTimeout(() => {
-                    this.mrdSearch.emit({ name: this.name, query, relatedClass: this.mostSignificantClass });
-                }, 300);
-            }
-            else {
-                this.searchResults = [];
-                this.showResults = false;
-                this.isLoading = false;
-            }
-        };
-        this.handleResultSelect = (result) => {
-            if (this.multiple) {
-                if (!this.selectedItems.find(i => i.id === result.id)) {
-                    this.selectedItems = [...this.selectedItems, result];
-                }
-                this.searchQuery = '';
-                this.searchResults = [];
-                this.showResults = false;
-                const ids = this.selectedItems.map(i => i.id);
-                this.mrdChange.emit({ name: this.name, value: ids });
-            }
-            else {
-                this.selectedItems = [result];
-                this.searchQuery = result.label;
-                this.showResults = false;
-                this.mrdChange.emit({ name: this.name, value: result.id });
-            }
-            if (this.required && !validateRequired(this.selectedItems)) {
-                this.error = t('required', this.locale);
-            }
-            else {
-                this.error = '';
-            }
-        };
-        this.handleRemoveSelected = (id) => {
-            this.selectedItems = this.selectedItems.filter(i => i.id !== id);
-            const ids = this.selectedItems.map(i => i.id);
-            this.mrdChange.emit({ name: this.name, value: this.multiple ? ids : null });
-        };
-        this.handleDropdownChange = (e) => {
-            const val = e.target.value;
-            if (this.required && !validateRequired(val)) {
-                this.error = t('required', this.locale);
-            }
-            else {
-                this.error = '';
-            }
-            this.mrdChange.emit({ name: this.name, value: val });
-        };
-        this.handleBlur = () => {
-            var _a, _b;
-            setTimeout(() => {
-                this.showResults = false;
-                this.highlightedIndex = -1;
-            }, 200);
-            const val = this.multiple ? this.selectedItems.map(i => i.id) : ((_b = (_a = this.selectedItems[0]) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : null);
-            this.mrdBlur.emit({ name: this.name, value: val });
-        };
-    }
-    async setAllRecords(records) {
-        this.allRecords = records;
-    }
-    getValueHref() {
-        var _a, _b, _c;
-        const v = Array.isArray(this.value) ? ((_a = this.value[0]) !== null && _a !== void 0 ? _a : '') : ((_b = this.value) !== null && _b !== void 0 ? _b : '');
-        if (!v)
-            return '';
-        if (typeof v === 'object')
-            return (_c = v.id) !== null && _c !== void 0 ? _c : '';
-        return v;
-    }
-    allRecordsChanged() {
-        if (this.editBehavior !== ClientLayoutItemRelationEditBehavior.DROPDOWN)
-            return;
-        const current = this.getValueHref();
-        if (!current)
-            return;
-        // Defer past Stencil's async render cycle: options must exist in the DOM before
-        // select.value can be set. setAttribute('selected') alone is ignored by browsers
-        // when the select already has an established value.
-        setTimeout(() => {
-            var _a;
-            const select = (_a = this.el) === null || _a === void 0 ? void 0 : _a.querySelector('select');
-            if (select)
-                select.value = current;
-        }, 0);
-    }
-    async setSearchResults(results) {
-        this.searchResults = results;
-        this.isLoading = false;
-        this.showResults = true;
-        this.highlightedIndex = -1;
-    }
-    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) {
-            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 : '';
-            }
-        }
-    }
-    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;
-        const hasError = !!this.error;
-        if (this.editBehavior === ClientLayoutItemRelationEditBehavior.DROPDOWN) {
-            const currentValue = this.getValueHref();
-            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) ? ((_a = this.value[0]) !== null && _a !== void 0 ? _a : '') : ((_b = this.value) !== null && _b !== void 0 ? _b : '');
-            return (h(Host, null, h("div", { class: "mrd-relation-field" }, this.label && (h("label", { class: `mrd-relation-field__label${this.required ? ' mrd-relation-field__label--required' : ''}` }, this.label)), h("select", { class: `mrd-relation-field__select${hasError ? ' mrd-relation-field__select--error' : ''}`, name: this.name, required: this.required, disabled: this.disabled, onChange: this.handleDropdownChange }, h("option", { value: "" }, t('select_placeholder', this.locale)), this.dropdownValues.map(dv => (h("option", { key: dv.key, value: dv.key, selected: dv.key === currentValue }, dv.label)))), hasError && h("span", { class: "mrd-relation-field__error" }, this.error))));
-        }
-        // SEARCH mode
-        const labelEl = this.label && (h("label", { class: `mrd-relation-field__label${this.required ? ' mrd-relation-field__label--required' : ''}` }, this.label));
-        // Single selection: show selected value as a badge, hide the search input
-        if (!this.multiple && this.selectedItems.length > 0) {
-            return (h(Host, null, h("div", { class: "mrd-relation-field" }, labelEl, h("div", { class: `mrd-relation-field__selected-value${hasError ? ' mrd-relation-field__selected-value--error' : ''}` }, h("span", { class: "mrd-relation-field__selected-name" }, this.selectedItems[0].label), h("button", { type: "button", class: "mrd-relation-field__selected-clear", onClick: this.clearSelection, "aria-label": t('remove', this.locale) }, "\u2715")), hasError && h("span", { class: "mrd-relation-field__error" }, this.error))));
-        }
-        return (h(Host, null, h("div", { class: "mrd-relation-field" }, labelEl, this.multiple && this.selectedItems.length > 0 && (h("div", { class: "mrd-relation-field__tags" }, this.selectedItems.map(item => (h("span", { key: item.id, class: "mrd-relation-field__tag" }, item.label, h("button", { type: "button", class: "mrd-relation-field__tag-remove", onClick: () => this.handleRemoveSelected(item.id), "aria-label": t('remove', this.locale) }, "\u2715")))))), h("div", { class: "mrd-relation-field__search-wrapper" }, h("input", { class: `mrd-relation-field__search${hasError ? ' mrd-relation-field__search--error' : ''}`, type: "text", value: this.searchQuery, placeholder: t('search_placeholder', this.locale), disabled: this.disabled, onInput: this.handleSearchInput, onKeyDown: this.handleKeyDown, onBlur: this.handleBlur }), this.isLoading && (h("span", { class: "mrd-relation-field__spinner", "aria-label": t('loading', this.locale) }))), this.showResults && (h("div", { class: "mrd-relation-field__results" }, this.searchResults.length === 0 && !this.isLoading ? (h("div", { class: "mrd-relation-field__no-results" }, t('no_results', this.locale))) : (this.searchResults.map((result, i) => (h("div", { key: result.id, class: `mrd-relation-field__result-item${i === this.highlightedIndex ? ' mrd-relation-field__result-item--highlighted' : ''}`, onMouseDown: () => this.handleResultSelect(result) }, h("span", { class: "mrd-relation-field__result-label" }, result.label), result.description && (h("span", { class: "mrd-relation-field__result-desc" }, result.description)))))))), hasError && h("span", { class: "mrd-relation-field__error" }, this.error))));
-    }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "allRecords": [{
-                "allRecordsChanged": 0
-            }]
-    }; }
-};
-MrdRelationField.style = mrdRelationFieldScss();
-
-const mrdTextFieldScss = () => `.sc-mrd-text-field-h{display:block}.mrd-text-field.sc-mrd-text-field{display:flex;flex-direction:column;gap:var(--mrd-space-1);width:100%}.mrd-text-field__label.sc-mrd-text-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-text-field__label--required.sc-mrd-text-field::after{content:' *';color:var(--mrd-color-danger)}.mrd-text-field__input.sc-mrd-text-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);transition:border-color var(--mrd-transition), box-shadow var(--mrd-transition);outline:none;appearance:none;box-sizing:border-box}.mrd-text-field__input.sc-mrd-text-field::placeholder{color:var(--mrd-input-placeholder-color)}.mrd-text-field__input.sc-mrd-text-field:focus{border-color:var(--mrd-border-color-focus);box-shadow:var(--mrd-shadow-focus)}.mrd-text-field__input.sc-mrd-text-field:disabled{background-color:var(--mrd-input-bg-disabled);cursor:not-allowed;opacity:0.7}.mrd-text-field__input--error.sc-mrd-text-field{border-color:var(--mrd-border-color-error)}.mrd-text-field__input--error.sc-mrd-text-field:focus{box-shadow:var(--mrd-shadow-focus-error)}.mrd-text-field__error.sc-mrd-text-field{font-family:var(--mrd-font-family);font-size:var(--mrd-error-font-size);color:var(--mrd-error-color)}`;
-
-const MrdTextField = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.mrdChange = createEvent(this, "mrdChange");
-        this.mrdBlur = createEvent(this, "mrdBlur");
-        this.name = '';
-        this.label = '';
-        this.value = '';
-        this.placeholder = '';
-        this.required = false;
-        this.disabled = false;
-        this.locale = navigator.language;
-        this.error = '';
-        this.handleInput = (e) => {
-            const val = e.target.value;
-            this.mrdChange.emit({ name: this.name, value: val });
-        };
-        this.handleBlur = (e) => {
-            const val = e.target.value;
-            if (this.required && !validateRequired(val)) {
-                this.error = t('required', this.locale);
-            }
-            else {
-                this.error = '';
-            }
-            this.mrdBlur.emit({ name: this.name, value: val });
-        };
-    }
-    render() {
-        const hasError = !!this.error;
-        return (h(Host, { key: '4ddbcb2f8915235631c6f66449b28e664c24c0a4' }, h("div", { key: '91dbb52ed715c92d4ef2bc0924fd378d0dc839a8', class: "mrd-text-field" }, this.label && (h("label", { key: 'cf3278503107d313c08034273916a4b84a16febd', class: `mrd-text-field__label${this.required ? ' mrd-text-field__label--required' : ''}` }, this.label)), h("input", { key: '9ab992213bfaa372e453331e1b1e12a853c3ae6e', class: `mrd-text-field__input${hasError ? ' mrd-text-field__input--error' : ''}`, type: "text", name: this.name, value: this.value, placeholder: this.placeholder, required: this.required, disabled: this.disabled, onInput: this.handleInput, onBlur: this.handleBlur }), hasError && h("span", { key: 'a4ff2fdd2490f644eb97f66f15edc5af0b22e823', class: "mrd-text-field__error" }, this.error))));
-    }
-};
-MrdTextField.style = mrdTextFieldScss();
-
-const mrdTextareaFieldScss = () => `.sc-mrd-textarea-field-h{display:block}.mrd-textarea-field.sc-mrd-textarea-field{display:flex;flex-direction:column;gap:var(--mrd-space-1);width:100%}.mrd-textarea-field__label.sc-mrd-textarea-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-textarea-field__label--required.sc-mrd-textarea-field::after{content:' *';color:var(--mrd-color-danger)}.mrd-textarea-field__container.sc-mrd-textarea-field{border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);overflow:hidden;background-color:var(--mrd-input-bg);transition:border-color var(--mrd-transition), box-shadow var(--mrd-transition)}.mrd-textarea-field__container.sc-mrd-textarea-field:focus-within{border-color:var(--mrd-border-color-focus);box-shadow:var(--mrd-shadow-focus)}.mrd-textarea-field__container--error.sc-mrd-textarea-field{border-color:var(--mrd-border-color-error)}.mrd-textarea-field__container--error.sc-mrd-textarea-field:focus-within{box-shadow:var(--mrd-shadow-focus-error)}.mrd-textarea-field__editor.sc-mrd-textarea-field{min-height:150px;font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base)}.mrd-textarea-field__editor.sc-mrd-textarea-field .ql-toolbar.sc-mrd-textarea-field{border:none;border-bottom:var(--mrd-border-width) solid var(--mrd-border-color);font-family:var(--mrd-font-family)}.mrd-textarea-field__editor.sc-mrd-textarea-field .ql-container.sc-mrd-textarea-field{border:none;font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base)}.mrd-textarea-field__editor.sc-mrd-textarea-field .ql-editor.sc-mrd-textarea-field{min-height:120px;padding:var(--mrd-input-padding-y) var(--mrd-input-padding-x)}.mrd-textarea-field__editor.sc-mrd-textarea-field .ql-editor.ql-blank.sc-mrd-textarea-field::before{color:var(--mrd-input-placeholder-color);font-style:normal}.mrd-textarea-field__error.sc-mrd-textarea-field{font-family:var(--mrd-font-family);font-size:var(--mrd-error-font-size);color:var(--mrd-error-color)}`;
-
-const MrdTextareaField = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.mrdChange = createEvent(this, "mrdChange");
-        this.mrdBlur = createEvent(this, "mrdBlur");
-        this.name = '';
-        this.label = '';
-        this.value = '';
-        this.placeholder = '';
-        this.required = false;
-        this.disabled = false;
-        this.locale = navigator.language;
-        this.error = '';
-        this.editorReady = false;
-    }
-    componentDidLoad() {
-        this.initQuill();
-    }
-    async initQuill() {
-        try {
-            // Dynamically import Quill
-            const Quill = (await import('./quill-CiuCgGz_.js')).default;
-            this.editorEl = this.el.querySelector('.mrd-textarea-field__editor');
-            if (!this.editorEl)
-                return;
-            const quill = new Quill(this.editorEl, {
-                theme: 'snow',
-                placeholder: this.placeholder,
-                readOnly: this.disabled,
-                modules: {
-                    toolbar: [
-                        ['bold', 'italic', 'underline', 'strike'],
-                        [{ list: 'ordered' }, { list: 'bullet' }],
-                        [{ header: [1, 2, 3, false] }],
-                        ['link'],
-                        ['clean'],
-                    ],
-                },
-            });
-            if (this.value) {
-                quill.clipboard.dangerouslyPasteHTML(this.value);
-            }
-            quill.on('text-change', () => {
-                var _a, _b;
-                const html = (_b = (_a = this.editorEl.querySelector('.ql-editor')) === null || _a === void 0 ? void 0 : _a.innerHTML) !== null && _b !== void 0 ? _b : '';
-                this.mrdChange.emit({ name: this.name, value: html });
-            });
-            quill.on('selection-change', (range) => {
-                var _a, _b;
-                if (!range) {
-                    const html = (_b = (_a = this.editorEl.querySelector('.ql-editor')) === null || _a === void 0 ? void 0 : _a.innerHTML) !== null && _b !== void 0 ? _b : '';
-                    if (this.required && !validateRequired(html)) {
-                        this.error = t('required', this.locale);
-                    }
-                    else {
-                        this.error = '';
-                    }
-                    this.mrdBlur.emit({ name: this.name, value: html });
-                }
-            });
-            this.editorReady = true;
-        }
-        catch (err) {
-            console.error('Failed to load Quill editor:', err);
-        }
-    }
-    render() {
-        return (h(Host, { key: '8f7544745341ea2eca4450296db53ed8b41af0e2' }, h("div", { key: '62937448dd685071e0500b8f7f53fe22b10ffa15', class: "mrd-textarea-field" }, this.label && (h("label", { key: '4a7d807d78c2a9abeaf3ff94ee5e71b167475e25', class: `mrd-textarea-field__label${this.required ? ' mrd-textarea-field__label--required' : ''}` }, this.label)), h("div", { key: '599e28a45b1c161d7cfec3de138e386bf997f9b9', class: `mrd-textarea-field__container${this.error ? ' mrd-textarea-field__container--error' : ''}` }, h("div", { key: '5824a225fa6ea29bf02dfd8e4b27a71e853f059e', class: "mrd-textarea-field__editor" })), this.error && h("span", { key: '1c7693269df8f3fe112a6df419e6cbace75bdaa9', class: "mrd-textarea-field__error" }, this.error))));
-    }
-    get el() { return getElement(this); }
-};
-MrdTextareaField.style = mrdTextareaFieldScss();
-
-const mrdTimeFieldScss = () => `.sc-mrd-time-field-h{display:block}.mrd-time-field.sc-mrd-time-field{display:flex;flex-direction:column;gap:var(--mrd-space-1);width:100%}.mrd-time-field__label.sc-mrd-time-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-time-field__label--required.sc-mrd-time-field::after{content:' *';color:var(--mrd-color-danger)}.mrd-time-field__input.sc-mrd-time-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);transition:border-color var(--mrd-transition), box-shadow var(--mrd-transition);outline:none;appearance:none;box-sizing:border-box;cursor:pointer}.mrd-time-field__input.sc-mrd-time-field:focus{border-color:var(--mrd-border-color-focus);box-shadow:var(--mrd-shadow-focus)}.mrd-time-field__input.sc-mrd-time-field:disabled{background-color:var(--mrd-input-bg-disabled);cursor:not-allowed;opacity:0.7}.mrd-time-field__input--error.sc-mrd-time-field{border-color:var(--mrd-border-color-error)}.mrd-time-field__input--error.sc-mrd-time-field:focus{box-shadow:var(--mrd-shadow-focus-error)}.mrd-time-field__error.sc-mrd-time-field{font-family:var(--mrd-font-family);font-size:var(--mrd-error-font-size);color:var(--mrd-error-color)}`;
-
-const MrdTimeField = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.mrdChange = createEvent(this, "mrdChange");
-        this.mrdBlur = createEvent(this, "mrdBlur");
-        this.name = '';
-        this.label = '';
-        this.value = '';
-        this.required = false;
-        this.disabled = false;
-        this.locale = navigator.language;
-        this.error = '';
-        this.handleChange = (e) => {
-            const val = e.target.value;
-            if (this.required && !validateRequired(val)) {
-                this.error = t('required', this.locale);
-            }
-            else {
-                this.error = '';
-            }
-            this.mrdChange.emit({ name: this.name, value: val });
-        };
-        this.handleBlur = (e) => {
-            const val = e.target.value;
-            this.mrdBlur.emit({ name: this.name, value: val });
-        };
-    }
-    render() {
-        const hasError = !!this.error;
-        return (h(Host, { key: '0a6e3047eb409b50a7dfa46c724e0d9824bdbad9' }, h("div", { key: '1fdcaa9cc0e44edd514d3453df0cfb264989cbca', class: "mrd-time-field" }, this.label && (h("label", { key: 'ae53864761258ae56e29474c2da68c852fe8db57', class: `mrd-time-field__label${this.required ? ' mrd-time-field__label--required' : ''}` }, this.label)), h("input", { key: '60336f497545b61656756790cfb5ec096034ecf7', class: `mrd-time-field__input${hasError ? ' mrd-time-field__input--error' : ''}`, type: "time", name: this.name, value: this.value, required: this.required, disabled: this.disabled, onChange: this.handleChange, onBlur: this.handleBlur }), hasError && h("span", { key: 'f8409b690c67873f6e4fe10f1d404b57005f0557', class: "mrd-time-field__error" }, this.error))));
-    }
-};
-MrdTimeField.style = mrdTimeFieldScss();
-
-export { MrdBooleanField as mrd_boolean_field, MrdCurrencyField as mrd_currency_field, MrdDateField as mrd_date_field, MrdDatetimeField as mrd_datetime_field, MrdEmailField as mrd_email_field, MrdField as mrd_field, MrdFileField as mrd_file_field, MrdForm as mrd_form, MrdHyperlinkField as mrd_hyperlink_field, MrdImageField as mrd_image_field, MrdListField as mrd_list_field, MrdNumberField as mrd_number_field, MrdRelationField as mrd_relation_field, MrdTextField as mrd_text_field, MrdTextareaField as mrd_textarea_field, MrdTimeField as mrd_time_field };