@mmlogic/components 0.1.24 → 0.1.25

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

@@ -0,0 +1,3150 @@
+'use strict';
+
+var index = require('./index-BPj2cBXs.js');
+var index$1 = require('./index.cjs.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) {
+        index.registerInstance(this, hostRef);
+        this.mrdChange = index.createEvent(this, "mrdChange");
+        this.mrdBlur = index.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 (index.h(index.Host, { key: 'aed1d936d686870114a12aad9fc4cccb76ecd31e' }, index.h("div", { key: '5cc8aaa0f12d4195d02fce8a810d7d993e2e8c99', class: "mrd-boolean-field" }, index.h("label", { key: '41c3b3e0f01778fc2654ba86e3fe4e5a07c8537a', class: "mrd-boolean-field__toggle-label" }, index.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 }), index.h("span", { key: '079ee220fe692536af15a7fb4286626102ae940e', class: "mrd-boolean-field__toggle", "aria-hidden": "true" }), this.label && (index.h("span", { key: '1f4f52a41f0bd6ba4c61cf9d4db74ab2f1aa8877', class: `mrd-boolean-field__text${this.required ? ' mrd-boolean-field__text--required' : ''}` }, this.label))))));
+    }
+};
+MrdBooleanField.style = mrdBooleanFieldScss();
+
+const translations = {
+    nl: {
+        required: 'Dit veld is verplicht',
+        select_placeholder: 'Selecteer een optie',
+        search_placeholder: 'Zoeken...',
+        upload_file: 'Bestand uploaden',
+        choose_file: 'Bestand kiezen',
+        clear: 'Wissen',
+        today: 'Vandaag',
+        invalid_email: 'Voer een geldig e-mailadres in',
+        invalid_url: 'Voer een geldige URL in',
+        invalid_number: 'Voer een geldig getal in',
+        drop_file_here: 'Sleep bestand hierheen of',
+        browse: 'bladeren',
+        file_too_large: 'Bestand is te groot',
+        search_results: 'Zoekresultaten',
+        no_results: 'Geen resultaten gevonden',
+        loading: 'Laden...',
+        submit: 'Opslaan',
+        cancel: 'Annuleren',
+        remove: 'Verwijderen',
+        add: 'Toevoegen',
+        yes: 'Ja',
+        no: 'Nee',
+        // mrd-table footer
+        table_of: 'van',
+        download: 'Downloaden',
+        // mrd-table toolbar
+        table_filter: 'Filteren',
+        table_filter_hide: 'Filter verbergen',
+        table_filter_active: 'actief',
+        table_filter_clear_all: 'Alle filters wissen',
+        table_new_record: 'Nieuw record',
+        table_export_excel: 'Exporteer naar Excel',
+        // mrd-table filter popup
+        filter_sorting: 'Sortering',
+        filter_ascending: 'Oplopend',
+        filter_descending: 'Aflopend',
+        filter_section: 'Filter',
+        filter_apply: 'Toepassen',
+        filter_clear: 'Wissen',
+        filter_contains: 'Bevat',
+        filter_starts_with: 'Begint met',
+        filter_equals: 'Gelijk aan',
+        filter_has_value: 'Heeft waarde',
+        filter_is_empty: 'Is leeg',
+        filter_is_not_empty: 'Is niet leeg',
+        filter_exact: 'Exact',
+        filter_range: 'Bereik',
+        filter_from: 'Van',
+        filter_to: 'Tot',
+        filter_all: 'Alle',
+        filter_select_all: 'Alles',
+        filter_select_none: 'Geen',
+        filter_search_value: 'Zoekwaarde...',
+        filter_no_support: 'Geen filtering beschikbaar voor dit veldtype.',
+        // mrd-table textblock
+        textblock_show_more: 'Meer tonen',
+        close: 'Sluiten',
+    },
+    en: {
+        required: 'This field is required',
+        select_placeholder: 'Select an option',
+        search_placeholder: 'Search...',
+        upload_file: 'Upload file',
+        choose_file: 'Choose file',
+        clear: 'Clear',
+        today: 'Today',
+        invalid_email: 'Please enter a valid email address',
+        invalid_url: 'Please enter a valid URL',
+        invalid_number: 'Please enter a valid number',
+        drop_file_here: 'Drop file here or',
+        browse: 'browse',
+        file_too_large: 'File is too large',
+        search_results: 'Search results',
+        no_results: 'No results found',
+        loading: 'Loading...',
+        submit: 'Save',
+        cancel: 'Cancel',
+        remove: 'Remove',
+        add: 'Add',
+        yes: 'Yes',
+        no: 'No',
+        // mrd-table footer
+        table_of: 'of',
+        download: 'Download',
+        // mrd-table toolbar
+        table_filter: 'Filter',
+        table_filter_hide: 'Hide filter',
+        table_filter_active: 'active',
+        table_filter_clear_all: 'Clear all filters',
+        table_new_record: 'New record',
+        table_export_excel: 'Export to Excel',
+        // mrd-table filter popup
+        filter_sorting: 'Sorting',
+        filter_ascending: 'Ascending',
+        filter_descending: 'Descending',
+        filter_section: 'Filter',
+        filter_apply: 'Apply',
+        filter_clear: 'Clear',
+        filter_contains: 'Contains',
+        filter_starts_with: 'Starts with',
+        filter_equals: 'Equals',
+        filter_has_value: 'Has value',
+        filter_is_empty: 'Is empty',
+        filter_is_not_empty: 'Is not empty',
+        filter_exact: 'Exact',
+        filter_range: 'Range',
+        filter_from: 'From',
+        filter_to: 'To',
+        filter_all: 'All',
+        filter_select_all: 'All',
+        filter_select_none: 'None',
+        filter_search_value: 'Search value...',
+        filter_no_support: 'Filtering is not available for this field type.',
+        // mrd-table textblock
+        textblock_show_more: 'Show more',
+        close: 'Close',
+    },
+    ar: {
+        required: 'هذا الحقل مطلوب',
+        select_placeholder: 'اختر خياراً',
+        search_placeholder: 'بحث...',
+        upload_file: 'رفع ملف',
+        choose_file: 'اختر ملفاً',
+        clear: 'مسح',
+        today: 'اليوم',
+        invalid_email: 'يرجى إدخال عنوان بريد إلكتروني صحيح',
+        invalid_url: 'يرجى إدخال رابط صحيح',
+        invalid_number: 'يرجى إدخال رقم صحيح',
+        drop_file_here: 'اسحب الملف هنا أو',
+        browse: 'تصفح',
+        file_too_large: 'الملف كبير جداً',
+        search_results: 'نتائج البحث',
+        no_results: 'لم يتم العثور على نتائج',
+        loading: 'جار التحميل...',
+        submit: 'حفظ',
+        cancel: 'إلغاء',
+        remove: 'إزالة',
+        add: 'إضافة',
+        yes: 'نعم',
+        no: 'لا',
+        // mrd-table footer
+        table_of: 'من أصل',
+        download: 'تنزيل',
+        // mrd-table toolbar
+        table_filter: 'تصفية',
+        table_filter_hide: 'إخفاء التصفية',
+        table_filter_active: 'نشط',
+        table_filter_clear_all: 'مسح جميع الفلاتر',
+        table_new_record: 'سجل جديد',
+        table_export_excel: 'تصدير إلى Excel',
+        // mrd-table filter popup
+        filter_sorting: 'الترتيب',
+        filter_ascending: 'تصاعدي',
+        filter_descending: 'تنازلي',
+        filter_section: 'تصفية',
+        filter_apply: 'تطبيق',
+        filter_clear: 'مسح',
+        filter_contains: 'يحتوي على',
+        filter_starts_with: 'يبدأ بـ',
+        filter_equals: 'يساوي',
+        filter_has_value: 'له قيمة',
+        filter_is_empty: 'فارغ',
+        filter_is_not_empty: 'ليس فارغاً',
+        filter_exact: 'دقيق',
+        filter_range: 'نطاق',
+        filter_from: 'من',
+        filter_to: 'إلى',
+        filter_all: 'الكل',
+        filter_select_all: 'الكل',
+        filter_select_none: 'لا شيء',
+        filter_search_value: 'قيمة البحث...',
+        filter_no_support: 'التصفية غير متاحة لهذا النوع من الحقول.',
+        // mrd-table textblock
+        textblock_show_more: 'عرض المزيد',
+        close: 'إغلاق',
+    },
+    fr: {
+        required: 'Ce champ est obligatoire',
+        select_placeholder: 'Sélectionner une option',
+        search_placeholder: 'Rechercher...',
+        upload_file: 'Télécharger un fichier',
+        choose_file: 'Choisir un fichier',
+        clear: 'Effacer',
+        today: "Aujourd'hui",
+        invalid_email: 'Veuillez saisir une adresse e-mail valide',
+        invalid_url: 'Veuillez saisir une URL valide',
+        invalid_number: 'Veuillez saisir un nombre valide',
+        drop_file_here: 'Déposez le fichier ici ou',
+        browse: 'parcourir',
+        file_too_large: 'Le fichier est trop volumineux',
+        search_results: 'Résultats de recherche',
+        no_results: 'Aucun résultat trouvé',
+        loading: 'Chargement...',
+        submit: 'Enregistrer',
+        cancel: 'Annuler',
+        remove: 'Supprimer',
+        add: 'Ajouter',
+        yes: 'Oui',
+        no: 'Non',
+        // mrd-table footer
+        table_of: 'sur',
+        download: 'Télécharger',
+        // mrd-table toolbar
+        table_filter: 'Filtrer',
+        table_filter_hide: 'Masquer le filtre',
+        table_filter_active: 'actif',
+        table_filter_clear_all: 'Effacer tous les filtres',
+        table_new_record: 'Nouvel enregistrement',
+        table_export_excel: 'Exporter vers Excel',
+        // mrd-table filter popup
+        filter_sorting: 'Tri',
+        filter_ascending: 'Croissant',
+        filter_descending: 'Décroissant',
+        filter_section: 'Filtre',
+        filter_apply: 'Appliquer',
+        filter_clear: 'Effacer',
+        filter_contains: 'Contient',
+        filter_starts_with: 'Commence par',
+        filter_equals: 'Égal à',
+        filter_has_value: 'A une valeur',
+        filter_is_empty: 'Est vide',
+        filter_is_not_empty: "N'est pas vide",
+        filter_exact: 'Exact',
+        filter_range: 'Plage',
+        filter_from: 'De',
+        filter_to: 'À',
+        filter_all: 'Tous',
+        filter_select_all: 'Tous',
+        filter_select_none: 'Aucun',
+        filter_search_value: 'Valeur de recherche...',
+        filter_no_support: "Le filtrage n'est pas disponible pour ce type de champ.",
+        // mrd-table textblock
+        textblock_show_more: 'Voir plus',
+        close: 'Fermer',
+    },
+};
+function t(key, locale) {
+    var _a, _b, _c;
+    const lang = locale.split('-')[0].toLowerCase();
+    const dict = (_a = translations[lang]) !== null && _a !== void 0 ? _a : translations['en'];
+    return (_c = (_b = dict[key]) !== null && _b !== void 0 ? _b : translations['en'][key]) !== null && _c !== void 0 ? _c : key;
+}
+
+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 === index$1.ClientLayoutItemFieldDataType.INTEGER) {
+        return Number.isInteger(num);
+    }
+    if (dataType === index$1.ClientLayoutItemFieldDataType.PERCENTAGE) {
+        return num >= 0 && num <= 100;
+    }
+    return true;
+}
+
+function formatNumber(value, locale, options) {
+    if (value === null || value === undefined || isNaN(value))
+        return '';
+    return new Intl.NumberFormat(locale, options).format(value);
+}
+function formatCurrency(amount, currency, locale) {
+    if (amount === null || amount === undefined || isNaN(amount))
+        return '';
+    return new Intl.NumberFormat(locale, {
+        style: 'currency',
+        currency,
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2,
+    }).format(amount);
+}
+function formatPercentage(value, locale, decimalPrecision = 2) {
+    if (value === null || value === undefined || isNaN(value))
+        return '';
+    return new Intl.NumberFormat(locale, {
+        style: 'percent',
+        minimumFractionDigits: decimalPrecision,
+        maximumFractionDigits: decimalPrecision,
+    }).format(value);
+}
+function formatDate(value, locale) {
+    if (!value)
+        return '';
+    const date = typeof value === 'string' ? new Date(value) : value;
+    if (isNaN(date.getTime()))
+        return '';
+    return new Intl.DateTimeFormat(locale, { year: 'numeric', month: '2-digit', day: '2-digit' }).format(date);
+}
+function formatDateTime(value, locale) {
+    if (!value)
+        return '';
+    const date = typeof value === 'string' ? new Date(value) : value;
+    if (isNaN(date.getTime()))
+        return '';
+    return new Intl.DateTimeFormat(locale, {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit',
+    }).format(date);
+}
+function formatTime(value, locale) {
+    if (!value)
+        return '';
+    // value is HH:MM or HH:MM:SS
+    const [hours, minutes] = value.split(':').map(Number);
+    const date = new Date();
+    date.setHours(hours, minutes, 0, 0);
+    return new Intl.DateTimeFormat(locale, { hour: '2-digit', minute: '2-digit' }).format(date);
+}
+function parseLocalizedNumber(str, locale) {
+    var _a, _b, _c, _d;
+    if (!str || !str.trim())
+        return null;
+    // Detect decimal and thousands separators from the locale
+    const parts = new Intl.NumberFormat(locale).formatToParts(1234567.89);
+    const groupSep = (_b = (_a = parts.find((p) => p.type === 'group')) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : ',';
+    const decimalSep = (_d = (_c = parts.find((p) => p.type === 'decimal')) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : '.';
+    // Remove group separators, replace decimal separator with '.'
+    const normalized = str
+        .replace(new RegExp(`\\${groupSep}`, 'g'), '')
+        .replace(new RegExp(`\\${decimalSep}`), '.')
+        .replace('%', '')
+        .trim();
+    const parsed = parseFloat(normalized);
+    return isNaN(parsed) ? null : parsed;
+}
+
+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) {
+        index.registerInstance(this, hostRef);
+        this.mrdChange = index.createEvent(this, "mrdChange");
+        this.mrdBlur = index.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 (index.h(index.Host, { key: 'd3450e9c26b1a755d3e6a5a3561d93b2ac566a28' }, index.h("div", { key: 'b66942cc1953daff728504deef8a9cc1330ef549', class: "mrd-currency-field" }, this.label && (index.h("label", { key: '3d3f2f06e9ffea944552f0f7cf3150d0246c54f0', class: `mrd-currency-field__label${this.required ? ' mrd-currency-field__label--required' : ''}` }, this.label)), index.h("div", { key: 'd30a2adfceefdbefef2d4fe6633a163a753b15d0', class: "mrd-currency-field__row" }, index.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 }), index.h("select", { key: '21e55b04b7bf16586b5cfaa82d77db45c6dedf21', class: "mrd-currency-field__currency", disabled: this.disabled, onChange: this.handleCurrencyChange }, COMMON_CURRENCIES.map(c => (index.h("option", { key: c, value: c, selected: c === this.currency }, c))))), hasError && index.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) {
+        index.registerInstance(this, hostRef);
+        this.mrdChange = index.createEvent(this, "mrdChange");
+        this.mrdBlur = index.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 (index.h(index.Host, { key: '84c777fc68a95e0b1ceb08d61e3af7afa199ce94' }, index.h("div", { key: '6653d94ab79c74342ce792792547018e4464a814', class: "mrd-date-field" }, this.label && (index.h("label", { key: '2fa7b7ec50c784f9410ca48b93d50e39dc6e0bee', class: `mrd-date-field__label${this.required ? ' mrd-date-field__label--required' : ''}` }, this.label)), index.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 && index.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) {
+        index.registerInstance(this, hostRef);
+        this.mrdChange = index.createEvent(this, "mrdChange");
+        this.mrdBlur = index.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 (index.h(index.Host, { key: '6052b08238484bee345ae4bb9b3025c7f2474c35' }, index.h("div", { key: 'f9073be4496e35a7d40405ae4e6a27a5c1607626', class: "mrd-datetime-field" }, this.label && (index.h("label", { key: '5933c3b2dfcae9bfad378441210ada6b625657a2', class: `mrd-datetime-field__label${this.required ? ' mrd-datetime-field__label--required' : ''}` }, this.label)), index.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 && index.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) {
+        index.registerInstance(this, hostRef);
+        this.mrdChange = index.createEvent(this, "mrdChange");
+        this.mrdBlur = index.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 (index.h(index.Host, { key: '851ec092957ab86e811b292eaabe29d04a600fe0' }, index.h("div", { key: '2d8969d60378f3161656369494549d682de8ec0e', class: "mrd-email-field" }, this.label && (index.h("label", { key: '7a35cc60d4804097e1a54f984c7da1829f6bbd11', class: `mrd-email-field__label${this.required ? ' mrd-email-field__label--required' : ''}` }, this.label)), index.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 && index.h("span", { key: 'a44b3b41b7cd6b8c643cc64e6aadd884a2ba4961', class: "mrd-email-field__error" }, this.error))));
+    }
+};
+MrdEmailField.style = mrdEmailFieldScss();
+
+const MrdField = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.mrdChange = index.createEvent(this, "mrdChange");
+        this.mrdBlur = index.createEvent(this, "mrdBlur");
+        this.mrdSearch = index.createEvent(this, "mrdSearch");
+        this.mrdFetchAll = index.createEvent(this, "mrdFetchAll");
+        this.mrdUpload = index.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, _7, _8;
+        const { item, locale, value } = this;
+        if (item.type === index$1.ClientLayoutItemType.RELATION && item.relation) {
+            const rel = item.relation;
+            return (index.h(index.Host, null, index.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 : index$1.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 !== index$1.ClientLayoutItemType.FIELD || !item.field) {
+            return index.h(index.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 index$1.ClientLayoutItemFieldDataType.TEXT:
+                return (index.h(index.Host, null, index.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 index$1.ClientLayoutItemFieldDataType.TEXTBLOCK:
+                return (index.h(index.Host, null, index.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 index$1.ClientLayoutItemFieldDataType.INTEGER:
+            case index$1.ClientLayoutItemFieldDataType.DECIMAL:
+            case index$1.ClientLayoutItemFieldDataType.PERCENTAGE:
+                return (index.h(index.Host, null, index.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 index$1.ClientLayoutItemFieldDataType.CURRENCY:
+                return (index.h(index.Host, null, index.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 index$1.ClientLayoutItemFieldDataType.BOOLEAN:
+                return (index.h(index.Host, null, index.h("mrd-boolean-field", Object.assign({}, commonProps, { value: (_s = value) !== null && _s !== void 0 ? _s : false }))));
+            case index$1.ClientLayoutItemFieldDataType.DATE:
+                return (index.h(index.Host, null, index.h("mrd-date-field", Object.assign({}, commonProps, { value: (_t = value) !== null && _t !== void 0 ? _t : '' }))));
+            case index$1.ClientLayoutItemFieldDataType.DATETIME:
+                return (index.h(index.Host, null, index.h("mrd-datetime-field", Object.assign({}, commonProps, { value: (_u = value) !== null && _u !== void 0 ? _u : '' }))));
+            case index$1.ClientLayoutItemFieldDataType.TIME:
+                return (index.h(index.Host, null, index.h("mrd-time-field", Object.assign({}, commonProps, { value: (_v = value) !== null && _v !== void 0 ? _v : '' }))));
+            case index$1.ClientLayoutItemFieldDataType.EMAIL:
+                return (index.h(index.Host, null, index.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 index$1.ClientLayoutItemFieldDataType.HYPERLINK:
+                return (index.h(index.Host, null, index.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 index$1.ClientLayoutItemFieldDataType.LIST:
+                return (index.h(index.Host, null, index.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 index$1.ClientLayoutItemFieldDataType.FILE:
+                return (index.h(index.Host, null, index.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 index$1.ClientLayoutItemFieldDataType.IMAGE:
+                return (index.h(index.Host, null, index.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 }))));
+            case index$1.ClientLayoutItemFieldDataType.LONGTEXT:
+                return (index.h(index.Host, null, index.h("mrd-longtext-field", Object.assign({}, commonProps, { value: (_7 = value) !== null && _7 !== void 0 ? _7 : '', placeholder: (_8 = field.placeholder) !== null && _8 !== void 0 ? _8 : '' }))));
+            case index$1.ClientLayoutItemFieldDataType.JSON:
+                return index.h(index.Host, null);
+            default:
+                return index.h(index.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) {
+        index.registerInstance(this, hostRef);
+        this.mrdChange = index.createEvent(this, "mrdChange");
+        this.mrdBlur = index.createEvent(this, "mrdBlur");
+        this.mrdUpload = index.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 (index.h(index.Host, { key: '2090102df8169226c1e66f87cbc837296e4b55d4' }, index.h("div", { key: '7a37a09df1bfa2eaf28ed04c806ad5f7c0337bb0', class: "mrd-file-field" }, this.label && (index.h("label", { key: '8f1fcb8adbb66b792be902c7c548e50db99b6a53', class: `mrd-file-field__label${this.required ? ' mrd-file-field__label--required' : ''}` }, this.label)), index.h("div", { key: '66d992298f537b24d69ce3ead3dd229f6d124f3d', class: zoneClass, onClick: this.handleZoneClick, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, index.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 ? (index.h("div", { class: "mrd-file-field__selected" }, this.uploading ? (index.h("span", { class: "mrd-file-field__spinner", "aria-label": t('loading', this.locale) })) : (index.h("svg", { class: "mrd-file-field__icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, index.h("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }), index.h("polyline", { points: "14 2 14 8 20 8" }))), index.h("span", { class: "mrd-file-field__filename" }, this.fileName), !this.uploading && (index.h("button", { class: "mrd-file-field__clear", type: "button", onClick: this.handleClear, "aria-label": t('clear', this.locale) }, "\u2715")))) : (index.h("div", { class: "mrd-file-field__prompt" }, index.h("svg", { class: "mrd-file-field__upload-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, index.h("polyline", { points: "16 16 12 12 8 16" }), index.h("line", { x1: "12", y1: "12", x2: "12", y2: "21" }), index.h("path", { d: "M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3" })), index.h("span", null, t('drop_file_here', this.locale), ' ', index.h("span", { class: "mrd-file-field__browse" }, t('browse', this.locale)))))), hasError && index.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) {
+        index.registerInstance(this, hostRef);
+        this.mrdSubmit = index.createEvent(this, "mrdSubmit");
+        this.mrdCancel = index.createEvent(this, "mrdCancel");
+        this.mrdSearch = index.createEvent(this, "mrdSearch");
+        this.mrdFetchAll = index.createEvent(this, "mrdFetchAll");
+        this.mrdUpload = index.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 === index$1.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 === index$1.ClientLayoutItemType.RELATION)
+            .map(item => item.relation.name));
+        for (const item of allItems) {
+            const rel = item.relation;
+            if (item.type === index$1.ClientLayoutItemType.RELATION &&
+                (rel === null || rel === void 0 ? void 0 : rel.editBehavior) === index$1.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 === index$1.ClientLayoutItemType.RELATION &&
+                ((_a = item.relation) === null || _a === void 0 ? void 0 : _a.editBehavior) === index$1.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 === index$1.ClientLayoutItemType.FIELD || item.type === index$1.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 === index$1.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 === index$1.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 === index$1.ClientLayoutItemType.SECTION) {
+                return (index.h("fieldset", { class: "mrd-form__section" }, item.label && index.h("legend", { class: "mrd-form__section-legend" }, item.label), index.h("div", { class: "mrd-form__section-body" }, item.items && this.renderItems(item.items))));
+            }
+            if (item.type === index$1.ClientLayoutItemType.GROUP) {
+                return (index.h("div", { class: "mrd-form__group" }, item.label && index.h("div", { class: "mrd-form__group-label" }, item.label), index.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 (index.h("div", { class: "mrd-form__field" }, index.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] && (index.h("span", { class: "mrd-form__field-error" }, this.errors[fieldName]))));
+        });
+    }
+    render() {
+        if (!this.layout) {
+            return index.h(index.Host, null);
+        }
+        const dir = this.locale.startsWith('ar') ? 'rtl' : 'ltr';
+        return (index.h(index.Host, null, index.h("form", { class: "mrd-form", dir: dir, onSubmit: this.handleSubmit, noValidate: true }, this.layout.title && index.h("h2", { class: "mrd-form__title" }, this.layout.title), index.h("div", { class: "mrd-form__body" }, this.renderItems(this.layout.items)), index.h("div", { class: "mrd-form__footer" }, index.h("button", { type: "submit", class: "mrd-form__submit" }, t('submit', this.locale)), this.showCancel && (index.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) {
+        index.registerInstance(this, hostRef);
+        this.mrdChange = index.createEvent(this, "mrdChange");
+        this.mrdBlur = index.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 (index.h(index.Host, { key: '4f642cb037c6e25786593dbf0cbead71ce34580c' }, index.h("div", { key: 'c679d95924bc2d22089c435ec15a35132a4a062d', class: "mrd-hyperlink-field" }, this.label && (index.h("label", { key: 'b391dd2d152c68fe75517926c40779313a23b9d9', class: `mrd-hyperlink-field__label${this.required ? ' mrd-hyperlink-field__label--required' : ''}` }, this.label)), index.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 && index.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) {
+        index.registerInstance(this, hostRef);
+        this.mrdChange = index.createEvent(this, "mrdChange");
+        this.mrdBlur = index.createEvent(this, "mrdBlur");
+        this.mrdUpload = index.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 (index.h(index.Host, { key: '76b5a36a7f5a420ded3400c8a1481843363d1cbe' }, index.h("div", { key: '3544df84aaf427a25518bafe13d60cf89ed28537', class: "mrd-image-field" }, this.label && (index.h("label", { key: 'dca64c1600cb98526eb4b91a908106087f099ad1', class: `mrd-image-field__label${this.required ? ' mrd-image-field__label--required' : ''}` }, this.label)), index.h("div", { key: 'ce07f32126f0956e47ff6fc41ff231590e0503d3', class: zoneClass, onClick: this.handleZoneClick, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, index.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 ? (index.h("div", { class: "mrd-image-field__preview-container" }, index.h("div", { class: "mrd-image-field__preview-thumb" }, index.h("img", { class: "mrd-image-field__preview", src: this.previewUrl, alt: this.fileName }), this.uploading && index.h("div", { class: "mrd-image-field__preview-overlay" }, index.h("span", { class: "mrd-image-field__spinner" }))), index.h("div", { class: "mrd-image-field__preview-info" }, index.h("span", { class: "mrd-image-field__preview-name" }, this.fileName), this.uploading && (index.h("span", { class: "mrd-image-field__upload-status" }, t('loading', this.locale)))), !this.uploading && (index.h("button", { class: "mrd-image-field__clear", type: "button", onClick: this.handleClear, "aria-label": t('clear', this.locale) }, t('remove', this.locale))))) : (index.h("div", { class: "mrd-image-field__prompt" }, index.h("svg", { class: "mrd-image-field__upload-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, index.h("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }), index.h("circle", { cx: "8.5", cy: "8.5", r: "1.5" }), index.h("polyline", { points: "21 15 16 10 5 21" })), index.h("span", null, t('drop_file_here', this.locale), ' ', index.h("span", { class: "mrd-image-field__browse" }, t('browse', this.locale)))))), hasError && index.h("span", { key: '9b8f9563fea63bd12c38f5c480e9cbd24106c3af', class: "mrd-image-field__error" }, this.error))));
+    }
+    static get watchers() { return {
+        "value": [{
+                "valueChanged": 0
+            }]
+    }; }
+};
+MrdImageField.style = mrdImageFieldScss();
+
+class CellRenderer {
+    static render(column, row, locale) {
+        var _a, _b, _c, _d;
+        if (column.type === index$1.ClientLayoutItemType.RELATION) {
+            const name = (_b = (_a = column.relation) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : '';
+            const link = (_c = row === null || row === void 0 ? void 0 : row._links) === null || _c === void 0 ? void 0 : _c[name];
+            if (!link)
+                return '';
+            if (Array.isArray(link))
+                return link.map((l) => { var _a; return (_a = l.name) !== null && _a !== void 0 ? _a : ''; }).filter(Boolean).join(', ');
+            return (_d = link.name) !== null && _d !== void 0 ? _d : '';
+        }
+        if (column.type !== index$1.ClientLayoutItemType.FIELD || !column.field)
+            return '';
+        const { name, dataType, listItems } = column.field;
+        const raw = row === null || row === void 0 ? void 0 : row[name];
+        if (raw == null || raw === '')
+            return '';
+        const values = Array.isArray(raw) ? raw : [raw];
+        return values
+            .map(v => CellRenderer.renderValue(dataType !== null && dataType !== void 0 ? dataType : 'TEXT', v, listItems !== null && listItems !== void 0 ? listItems : [], locale))
+            .filter(s => s !== '')
+            .join(', ');
+    }
+    static renderValue(dataType, value, listItems, locale) {
+        var _a, _b;
+        switch (dataType) {
+            case 'INTEGER':
+                return formatNumber(Number(value), locale, { maximumFractionDigits: 0 });
+            case 'DECIMAL':
+                return formatNumber(Number(value), locale);
+            case 'PERCENTAGE':
+                return formatPercentage(Number(value), locale);
+            case 'CURRENCY': {
+                const { amount, currency } = typeof value === 'object' && value !== null
+                    ? value
+                    : { amount: value, currency: '' };
+                return currency
+                    ? formatCurrency(Number(amount), currency, locale)
+                    : formatNumber(Number(amount), locale);
+            }
+            case 'DATE':
+                return formatDate(value, locale);
+            case 'DATETIME':
+                return formatDateTime(value, locale);
+            case 'TIME':
+                return formatTime(value, locale);
+            case 'BOOLEAN':
+                return value ? '✓' : '';
+            case 'FILE':
+            case 'IMAGE':
+                return typeof value === 'object' && value !== null ? ((_a = value.fileName) !== null && _a !== void 0 ? _a : '') : '';
+            case 'LIST': {
+                const item = listItems.find(li => li.key === String(value));
+                return (_b = item === null || item === void 0 ? void 0 : item.label) !== null && _b !== void 0 ? _b : String(value);
+            }
+            case 'TEXTBLOCK': {
+                const stripped = String(value).replace(/<[^>]*>/g, '');
+                const txt = document.createElement('textarea');
+                txt.innerHTML = stripped;
+                return txt.value.trim();
+            }
+            case 'LONGTEXT':
+                return String(value).replace(/[\r\n]+/g, ' ').trim();
+            case 'JSON': {
+                const str = typeof value === 'object' ? JSON.stringify(value) : String(value);
+                return str.replace(/[\r\n]+/g, ' ').trim();
+            }
+            default:
+                return String(value);
+        }
+    }
+    /**
+     * Returns syntax-highlighted JSON as an HTML string with inline styles.
+     * compact=true → single line (no indentation); compact=false → pretty-printed.
+     */
+    static formatJson(value, compact = false) {
+        try {
+            const parsed = typeof value === 'string' ? JSON.parse(value) : value;
+            const json = compact ? JSON.stringify(parsed) : JSON.stringify(parsed, null, 2);
+            return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, match => {
+                let style = 'color:#2aa198';
+                if (/^"/.test(match)) {
+                    style = /:$/.test(match) ? 'color:#881391' : 'color:#268bd2';
+                }
+                else if (/true|false/.test(match)) {
+                    style = 'color:#b58900';
+                }
+                else if (/null/.test(match)) {
+                    style = 'color:#dc322f';
+                }
+                return `<span style="${style}">${match}</span>`;
+            });
+        }
+        catch (_a) {
+            return String(value);
+        }
+    }
+}
+
+const mrdLayoutSectionScss = () => `.mrd-layout-section.sc-mrd-layout-section{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);color:var(--mrd-color-neutral-800)}.mrd-layout-section__field.sc-mrd-layout-section{display:grid;grid-template-columns:200px 1fr;align-items:baseline;gap:0 var(--mrd-space-2);padding:var(--mrd-space-1) 0}.mrd-layout-section__field-label.sc-mrd-layout-section{font-size:var(--mrd-font-size-xs);font-weight:var(--mrd-font-weight-normal);color:var(--mrd-color-neutral-500);padding-top:1px}.mrd-layout-section__field-value.sc-mrd-layout-section{font-size:var(--mrd-font-size-sm);font-weight:var(--mrd-font-weight-medium);color:var(--mrd-color-neutral-800);word-break:break-word}.mrd-layout-section__field-header.sc-mrd-layout-section{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-4) 0;padding:0}.mrd-layout-section__header.sc-mrd-layout-section{font-size:var(--mrd-font-size-xl);font-weight:var(--mrd-font-weight-semibold);color:var(--mrd-color-neutral-800);margin:var(--mrd-space-4) 0 var(--mrd-space-2) 0;padding:0}.mrd-layout-section__text.sc-mrd-layout-section{font-size:var(--mrd-font-size-base);color:var(--mrd-color-neutral-700);line-height:var(--mrd-line-height-relaxed);margin:var(--mrd-space-2) 0}.mrd-layout-section__navigate.sc-mrd-layout-section{display:inline-flex;align-items:center;gap:var(--mrd-space-2);padding:var(--mrd-space-2) var(--mrd-space-3);background:none;border:1px solid var(--mrd-color-neutral-300);border-radius:var(--mrd-border-radius);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);color:var(--mrd-color-primary);cursor:pointer;margin:var(--mrd-space-2) 0}.mrd-layout-section__navigate.sc-mrd-layout-section:hover{background-color:var(--mrd-color-primary-light);border-color:var(--mrd-color-primary)}.mrd-layout-section__link.sc-mrd-layout-section{color:var(--mrd-color-primary);text-decoration:none}.mrd-layout-section__link.sc-mrd-layout-section:hover{text-decoration:underline}.mrd-layout-section__relation-link.sc-mrd-layout-section{background:none;border:none;padding:0;font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);font-weight:var(--mrd-font-weight-semibold);color:var(--mrd-color-primary);cursor:pointer;text-align:left}.mrd-layout-section__relation-link.sc-mrd-layout-section:hover{text-decoration:underline}.mrd-layout-section__download-link.sc-mrd-layout-section{background:none;border:none;padding:0;font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);color:var(--mrd-color-primary);cursor:pointer;text-decoration:underline;text-align:left}.mrd-layout-section__boolean--true.sc-mrd-layout-section{color:var(--mrd-color-success);font-weight:var(--mrd-font-weight-semibold)}.mrd-layout-section__boolean--false.sc-mrd-layout-section{color:var(--mrd-color-neutral-400)}.mrd-layout-section__field--block.sc-mrd-layout-section{grid-template-columns:1fr}.mrd-layout-section__badge.sc-mrd-layout-section{display:inline-block;font-size:var(--mrd-font-size-xs);font-weight:var(--mrd-font-weight-medium);padding:2px var(--mrd-space-3);border-radius:10px}.mrd-layout-section__badge-dot-row.sc-mrd-layout-section{display:inline-flex;align-items:center;gap:var(--mrd-space-2)}.mrd-layout-section__badge-dot.sc-mrd-layout-section{display:inline-block;width:10px;height:10px;border-radius:50%;flex-shrink:0}.mrd-layout-section__pre.sc-mrd-layout-section{font-family:var(--mrd-font-family-mono);font-size:var(--mrd-font-size-xs);background-color:var(--mrd-color-neutral-50);border:1px solid var(--mrd-color-neutral-200);border-radius:var(--mrd-border-radius);padding:var(--mrd-space-3);margin:0;overflow-x:auto;white-space:pre-wrap;word-break:break-word}.mrd-layout-section__group.sc-mrd-layout-section{margin:var(--mrd-space-4) 0}.mrd-layout-section__group-title.sc-mrd-layout-section{font-size:var(--mrd-font-size-sm);font-weight:var(--mrd-font-weight-semibold);color:var(--mrd-color-neutral-500);margin:0 0 var(--mrd-space-2) 0;padding-bottom:0;text-transform:uppercase;letter-spacing:0.05em}.mrd-layout-section__related-view.sc-mrd-layout-section{margin:var(--mrd-space-4) 0}.mrd-layout-section__related-view-title.sc-mrd-layout-section{font-size:var(--mrd-font-size-lg);font-weight:var(--mrd-font-weight-semibold);color:var(--mrd-color-neutral-800);margin:0 0 var(--mrd-space-3) 0}.mrd-layout-section__search.sc-mrd-layout-section{position:relative;margin:var(--mrd-space-2) 0}.mrd-layout-section__search-input.sc-mrd-layout-section{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-layout-section__search-input.sc-mrd-layout-section:focus{border-color:var(--mrd-border-color-focus);box-shadow:var(--mrd-shadow-focus)}.mrd-layout-section__search-input.sc-mrd-layout-section::placeholder{color:var(--mrd-input-placeholder-color)}.mrd-layout-section__search-results.sc-mrd-layout-section{position:absolute;top:100%;left:0;right:0;background-color:var(--mrd-color-white);border:1px solid var(--mrd-color-neutral-300);border-top:none;border-radius:0 0 var(--mrd-border-radius) var(--mrd-border-radius);box-shadow:var(--mrd-shadow-sm);z-index:100;max-height:300px;overflow-y:auto;list-style:none;margin:0;padding:var(--mrd-space-1) 0}.mrd-layout-section__search-result.sc-mrd-layout-section{margin:0;padding:0}.mrd-layout-section__search-result-btn.sc-mrd-layout-section{display:flex;flex-direction:column;width:100%;padding:var(--mrd-space-2) var(--mrd-space-3);background:none;border:none;text-align:left;cursor:pointer;font-family:var(--mrd-font-family)}.mrd-layout-section__search-result-btn.sc-mrd-layout-section:hover{background-color:var(--mrd-color-primary-light)}.mrd-layout-section__search-result-label.sc-mrd-layout-section{font-size:var(--mrd-font-size-sm);font-weight:var(--mrd-font-weight-medium);color:var(--mrd-color-neutral-800)}.mrd-layout-section__search-result-desc.sc-mrd-layout-section{font-size:var(--mrd-font-size-xs);color:var(--mrd-color-neutral-500);margin-top:var(--mrd-space-1)}.mrd-layout-section__image-thumb-btn.sc-mrd-layout-section{background:none;border:none;padding:0;cursor:pointer;display:inline-block;border-radius:var(--mrd-border-radius);overflow:hidden;line-height:0}.mrd-layout-section__image-thumb-btn.sc-mrd-layout-section:hover .mrd-layout-section__image-thumb.sc-mrd-layout-section{opacity:0.85}.mrd-layout-section__image-thumb.sc-mrd-layout-section{display:block;max-width:160px;max-height:100px;border-radius:var(--mrd-border-radius);object-fit:cover;transition:opacity 0.15s}.mrd-layout-section__modal-backdrop.sc-mrd-layout-section{position:fixed;inset:0;background:rgba(0, 0, 0, 0.6);z-index:300;display:flex;align-items:center;justify-content:center}.mrd-layout-section__modal.sc-mrd-layout-section{position:relative;background:#fff;border-radius:var(--mrd-border-radius);padding:var(--mrd-space-3);max-width:min(90vw, 900px);max-height:90vh;display:flex;align-items:center;justify-content:center;box-shadow:var(--mrd-shadow-lg)}.mrd-layout-section__modal-close.sc-mrd-layout-section{position:absolute;top:var(--mrd-space-2);right:var(--mrd-space-2);background:rgba(0, 0, 0, 0.5);border:none;border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;font-size:var(--mrd-font-size-sm);line-height:1;z-index:1}.mrd-layout-section__modal-close.sc-mrd-layout-section:hover{background:rgba(0, 0, 0, 0.8)}.mrd-layout-section__modal-image.sc-mrd-layout-section{display:block;max-width:100%;max-height:calc(90vh - 2rem);border-radius:var(--mrd-border-radius);object-fit:contain}`;
+
+const MrdLayoutSection = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.mrdNavigate = index.createEvent(this, "mrdNavigate");
+        this.mrdSearch = index.createEvent(this, "mrdSearch");
+        this.mrdDownload = index.createEvent(this, "mrdDownload");
+        this.mrdLoadView = index.createEvent(this, "mrdLoadView");
+        this.mrdLoadViewPage = index.createEvent(this, "mrdLoadViewPage");
+        this.mrdLoadImage = index.createEvent(this, "mrdLoadImage");
+        this.mrdViewAction = index.createEvent(this, "mrdViewAction");
+        /** Items from one layout entry in ClientDashboardMetadata.layouts[]. */
+        this.items = [];
+        /** Record data object; keys are field names, _links holds relation and related-view links. */
+        this.data = {};
+        /** View metadata map (ClientDashboardMetadata.views) for RELATED_VIEW and VIEW items. */
+        this.views = {};
+        /** Top-level _links from ClientDashboardMetadata; used to resolve hrefs for VIEW items. */
+        this.links = {};
+        this.locale = navigator.language;
+        this.searchQueryMap = {};
+        this.searchResultsMap = {};
+        this.imagePreviewUrl = null;
+        this.imagePreviews = {};
+        this.viewLinksMap = {};
+        this.searchTimers = {};
+        this.handleViewLoadPage = (e, name) => {
+            e.stopPropagation();
+            this.mrdLoadViewPage.emit({ name, page: e.detail.page, sort: e.detail.sort });
+        };
+        this.handleSearchInput = (dataClass, query) => {
+            this.searchQueryMap = Object.assign(Object.assign({}, this.searchQueryMap), { [dataClass]: query });
+            if (this.searchTimers[dataClass])
+                clearTimeout(this.searchTimers[dataClass]);
+            if (query.length < 2) {
+                this.searchResultsMap = Object.assign(Object.assign({}, this.searchResultsMap), { [dataClass]: [] });
+                return;
+            }
+            this.searchTimers[dataClass] = setTimeout(() => {
+                this.mrdSearch.emit({ query, dataClass });
+            }, 300);
+        };
+    }
+    componentDidLoad() {
+        setTimeout(() => {
+            this.emitLoadViews();
+            this.emitLoadImages();
+        }, 0);
+    }
+    linksChanged(newVal) {
+        if (Object.keys(newVal !== null && newVal !== void 0 ? newVal : {}).length > 0) {
+            this.emitLoadViews();
+        }
+    }
+    dataChanged(newVal) {
+        var _a;
+        if (newVal && Object.keys((_a = newVal === null || newVal === void 0 ? void 0 : newVal._links) !== null && _a !== void 0 ? _a : {}).length > 0) {
+            this.emitLoadViews();
+        }
+    }
+    emitLoadViews() {
+        var _a, _b, _c, _d, _e, _f;
+        const dataLinks = ((_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a._links) !== null && _b !== void 0 ? _b : {});
+        for (const item of this.flattenItems(this.items)) {
+            if (item.type === index$1.ClientLayoutItemType.RELATED_VIEW && item.relatedView) {
+                const rv = item.relatedView;
+                const viewConfig = this.views[rv.name];
+                if (!viewConfig)
+                    continue;
+                const href = (_c = dataLinks[rv.relatedClass]) === null || _c === void 0 ? void 0 : _c.href;
+                this.mrdLoadView.emit({ name: rv.name, href, viewConfig });
+            }
+            else if (item.type === index$1.ClientLayoutItemType.VIEW) {
+                const viewName = (_e = (_d = item.view) === null || _d === void 0 ? void 0 : _d.name) !== null && _e !== void 0 ? _e : item.name;
+                if (!viewName)
+                    continue;
+                const viewConfig = this.views[viewName];
+                if (!viewConfig)
+                    continue;
+                const href = (_f = this.links[viewName]) === null || _f === void 0 ? void 0 : _f.href;
+                this.mrdLoadView.emit({ name: viewName, href, viewConfig });
+            }
+        }
+    }
+    emitLoadImages() {
+        var _a;
+        for (const item of this.flattenItems(this.items)) {
+            if (item.type === index$1.ClientLayoutItemType.FIELD && ((_a = item.field) === null || _a === void 0 ? void 0 : _a.dataType) === index$1.ClientLayoutItemFieldDataType.IMAGE) {
+                const fieldName = item.field.name;
+                const raw = this.data[fieldName];
+                const href = raw === null || raw === void 0 ? void 0 : raw.href;
+                if (href)
+                    this.mrdLoadImage.emit({ fieldName, href });
+            }
+        }
+    }
+    flattenItems(items) {
+        const result = [];
+        for (const item of items) {
+            result.push(item);
+            if (item.items)
+                result.push(...this.flattenItems(item.items));
+        }
+        return result;
+    }
+    /** Inject search results. Pass dataClass to target a specific SEARCH item; omit when there is only one. */
+    async setSearchResults(results, dataClass) {
+        const key = dataClass !== null && dataClass !== void 0 ? dataClass : this.resolveSearchKey();
+        if (key) {
+            this.searchResultsMap = Object.assign(Object.assign({}, this.searchResultsMap), { [key]: results });
+        }
+    }
+    /**
+     * Inject data into an embedded mrd-table for a RELATED_VIEW or VIEW item.
+     * Pass totalElements on page 0 to initialise the table; omit on subsequent pages.
+     * Pass pageLinks (_links from the page response) on page 0 to enable action hrefs in mrdViewAction.
+     */
+    async setViewPage(name, page, rows, totalElements, pageLinks) {
+        if (pageLinks) {
+            this.viewLinksMap = Object.assign(Object.assign({}, this.viewLinksMap), { [name]: pageLinks });
+        }
+        const table = this.el.querySelector(`mrd-table[data-view="${name}"]`);
+        if (!table)
+            return;
+        if (totalElements !== undefined) {
+            table.totalElements = totalElements;
+            await table.init();
+        }
+        await table.setPage(page, rows);
+    }
+    /** Provide a resolved URL for an IMAGE field. Shows as thumbnail; clicking opens the lightbox. */
+    async setImagePreview(fieldName, url) {
+        this.imagePreviews = Object.assign(Object.assign({}, this.imagePreviews), { [fieldName]: url });
+    }
+    /** Open the lightbox directly with a URL (e.g. after mrdDownload on a FILE field). */
+    async openImagePreview(url) {
+        this.imagePreviewUrl = url;
+    }
+    resolveSearchKey() {
+        const items = this.flattenItems(this.items).filter(i => i.type === index$1.ClientLayoutItemType.SEARCH);
+        if (items.length === 1 && items[0].search)
+            return items[0].search.dataClass;
+        return null;
+    }
+    renderSingleFieldValue(item, value) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        const field = item.field;
+        const dt = field.dataType;
+        switch (dt) {
+            case index$1.ClientLayoutItemFieldDataType.HYPERLINK: {
+                const v = value;
+                const href = (_a = v === null || v === void 0 ? void 0 : v.href) !== null && _a !== void 0 ? _a : String(value);
+                const label = (_c = (_b = v === null || v === void 0 ? void 0 : v.text) !== null && _b !== void 0 ? _b : v === null || v === void 0 ? void 0 : v.label) !== null && _c !== void 0 ? _c : href;
+                return (index.h("a", { class: "mrd-layout-section__link", href: href, target: "_blank", rel: "noopener noreferrer" }, label));
+            }
+            case index$1.ClientLayoutItemFieldDataType.TEXTBLOCK:
+                return index.h("span", { innerHTML: String(value) });
+            case index$1.ClientLayoutItemFieldDataType.LONGTEXT:
+                return index.h("pre", { class: "mrd-layout-section__pre" }, String(value));
+            case index$1.ClientLayoutItemFieldDataType.JSON:
+                return index.h("pre", { class: "mrd-layout-section__pre", innerHTML: CellRenderer.formatJson(value) });
+            case index$1.ClientLayoutItemFieldDataType.FILE: {
+                const v = value;
+                const fileName = (_d = v === null || v === void 0 ? void 0 : v.fileName) !== null && _d !== void 0 ? _d : String(value);
+                const href = (_e = v === null || v === void 0 ? void 0 : v.href) !== null && _e !== void 0 ? _e : '';
+                return (index.h("button", { class: "mrd-layout-section__download-link", onClick: () => href && this.mrdDownload.emit({ href, fileName }) }, t('download', this.locale)));
+            }
+            case index$1.ClientLayoutItemFieldDataType.IMAGE: {
+                const v = value;
+                const href = (_f = v === null || v === void 0 ? void 0 : v.href) !== null && _f !== void 0 ? _f : '';
+                const fileName = (_g = v === null || v === void 0 ? void 0 : v.fileName) !== null && _g !== void 0 ? _g : '';
+                const previewUrl = this.imagePreviews[field.name];
+                if (previewUrl) {
+                    return (index.h("button", { class: "mrd-layout-section__image-thumb-btn", onClick: () => { this.imagePreviewUrl = previewUrl; }, title: fileName || undefined }, index.h("img", { class: "mrd-layout-section__image-thumb", src: previewUrl, alt: fileName })));
+                }
+                return (index.h("button", { class: "mrd-layout-section__download-link", onClick: () => href && this.mrdDownload.emit({ href, fileName }) }, fileName || href));
+            }
+            case index$1.ClientLayoutItemFieldDataType.BOOLEAN:
+                return (index.h("span", { class: `mrd-layout-section__boolean mrd-layout-section__boolean--${value ? 'true' : 'false'}` }, value ? t('yes', this.locale) : t('no', this.locale)));
+            case index$1.ClientLayoutItemFieldDataType.LIST: {
+                const listItem = ((_h = field.listItems) !== null && _h !== void 0 ? _h : []).find(li => li.key === String(value));
+                const label = (_j = listItem === null || listItem === void 0 ? void 0 : listItem.label) !== null && _j !== void 0 ? _j : String(value);
+                const color = listItem === null || listItem === void 0 ? void 0 : listItem.color;
+                const bg = listItem === null || listItem === void 0 ? void 0 : listItem.backgroundColor;
+                if (color && bg) {
+                    return (index.h("span", { class: "mrd-layout-section__badge", style: { color, backgroundColor: bg } }, label));
+                }
+                if (color) {
+                    return (index.h("span", { class: "mrd-layout-section__badge-dot-row" }, index.h("span", { class: "mrd-layout-section__badge-dot", style: { backgroundColor: color } }), label));
+                }
+                return label;
+            }
+            default: {
+                const text = CellRenderer.renderValue(dt, value, (_k = field.listItems) !== null && _k !== void 0 ? _k : [], this.locale);
+                return text || null;
+            }
+        }
+    }
+    renderFieldValue(item, rawValue) {
+        if (rawValue == null || rawValue === '')
+            return null;
+        const field = item.field;
+        if (field.multiple && Array.isArray(rawValue)) {
+            const rendered = rawValue.map(v => this.renderSingleFieldValue(item, v));
+            if (rendered.every(r => typeof r === 'string' || r == null)) {
+                return rendered.filter(Boolean).join(', ') || null;
+            }
+            return (index.h("span", null, rendered.map((r, i) => (index.h("span", { key: String(i) }, r, i < rendered.length - 1 ? ', ' : '')))));
+        }
+        return this.renderSingleFieldValue(item, rawValue);
+    }
+    renderField(item) {
+        if (!item.field)
+            return null;
+        const field = item.field;
+        const rawValue = this.data[field.name];
+        const renderedValue = this.renderFieldValue(item, rawValue);
+        if (field.header) {
+            return (index.h("h1", { class: "mrd-layout-section__field-header", key: field.name }, typeof renderedValue === 'string' ? renderedValue : rawValue != null ? String(rawValue) : item.label));
+        }
+        if (renderedValue == null)
+            return null;
+        const isBlock = field.dataType === index$1.ClientLayoutItemFieldDataType.TEXTBLOCK
+            || field.dataType === index$1.ClientLayoutItemFieldDataType.LONGTEXT
+            || field.dataType === index$1.ClientLayoutItemFieldDataType.JSON;
+        return (index.h("div", { class: `mrd-layout-section__field${isBlock ? ' mrd-layout-section__field--block' : ''}`, key: field.name }, index.h("span", { class: "mrd-layout-section__field-label" }, item.label), index.h("span", { class: "mrd-layout-section__field-value" }, renderedValue)));
+    }
+    renderRelation(item) {
+        var _a, _b, _c;
+        if (!item.relation)
+            return null;
+        const links = ((_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a._links) !== null && _b !== void 0 ? _b : {});
+        const link = links[item.relation.name];
+        if (!link)
+            return null;
+        const makeBtn = (href, name) => (index.h("button", { key: href, class: "mrd-layout-section__relation-link", onClick: () => this.mrdNavigate.emit({ href, label: name }) }, name));
+        let valueContent;
+        if ((_c = link.values) === null || _c === void 0 ? void 0 : _c.length) {
+            valueContent = link.values.map(v => makeBtn(v.href, v.name));
+        }
+        else if (link.name) {
+            valueContent = makeBtn(link.href, link.name);
+        }
+        if (!valueContent)
+            return null;
+        return (index.h("div", { class: "mrd-layout-section__field", key: item.relation.name }, index.h("span", { class: "mrd-layout-section__field-label" }, item.label), index.h("span", { class: "mrd-layout-section__field-value" }, valueContent)));
+    }
+    renderSearch(item) {
+        var _a, _b, _c;
+        if (!item.search)
+            return null;
+        const dataClass = item.search.dataClass;
+        const query = (_a = this.searchQueryMap[dataClass]) !== null && _a !== void 0 ? _a : '';
+        const results = (_b = this.searchResultsMap[dataClass]) !== null && _b !== void 0 ? _b : [];
+        return (index.h("div", { class: "mrd-layout-section__search", key: `search-${dataClass}` }, index.h("input", { class: "mrd-layout-section__search-input", type: "text", value: query, placeholder: (_c = item.label) !== null && _c !== void 0 ? _c : '', onInput: e => this.handleSearchInput(dataClass, e.target.value) }), results.length > 0 && (index.h("ul", { class: "mrd-layout-section__search-results" }, results.map(r => (index.h("li", { key: r.id, class: "mrd-layout-section__search-result" }, index.h("button", { class: "mrd-layout-section__search-result-btn", onClick: () => this.mrdNavigate.emit({ href: r.id, label: r.label }) }, index.h("span", { class: "mrd-layout-section__search-result-label" }, r.label), r.description && index.h("span", { class: "mrd-layout-section__search-result-desc" }, r.description)))))))));
+    }
+    renderRelatedView(item) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        const isRelated = item.type === index$1.ClientLayoutItemType.RELATED_VIEW;
+        // Support both nested (item.view / item.relatedView) and flat API format (item.name)
+        const name = isRelated
+            ? (_a = item.relatedView) === null || _a === void 0 ? void 0 : _a.name
+            : ((_c = (_b = item.view) === null || _b === void 0 ? void 0 : _b.name) !== null && _c !== void 0 ? _c : item.name);
+        if (!name)
+            return null;
+        const viewConfig = this.views[name];
+        if (!viewConfig)
+            return null;
+        const showTitle = isRelated
+            ? (_d = item.relatedView) === null || _d === void 0 ? void 0 : _d.showTitle
+            : ((_g = (_f = (_e = item.view) === null || _e === void 0 ? void 0 : _e.showTitle) !== null && _f !== void 0 ? _f : item.showTitle) !== null && _g !== void 0 ? _g : false);
+        const altViews = isRelated ? undefined : item.alternativeViews;
+        const rawActions = (_h = item.actions) !== null && _h !== void 0 ? _h : ['NEW', 'EXPORT'];
+        const tableActions = rawActions.reduce((acc, a) => {
+            if (a === 'NEW')
+                acc.push({ action: 'create', label: t('table_new_record', this.locale), icon: 'assets/sprites.svg#icon-plus', variant: 'primary' });
+            if (a === 'EXPORT')
+                acc.push({ action: 'export', label: t('table_export_excel', this.locale), icon: 'assets/sprites.svg#icon-file-excel' });
+            return acc;
+        }, []);
+        return (index.h("div", { class: "mrd-layout-section__related-view", key: `view-${name}` }, showTitle && item.label && index.h("h3", { class: "mrd-layout-section__related-view-title" }, item.label), index.h("mrd-table", { "data-view": name, columns: viewConfig.values, locale: this.locale, defaultSort: (_j = viewConfig.defaultSort) !== null && _j !== void 0 ? _j : '', alternativeViews: altViews, actions: tableActions, onMrdLoadPage: (e) => this.handleViewLoadPage(e, name), onMrdAction: (e) => {
+                var _a, _b, _c;
+                e.stopPropagation();
+                const pl = (_a = this.viewLinksMap[name]) !== null && _a !== void 0 ? _a : {};
+                const href = e.detail.action === 'export' ? (_b = pl['excel']) === null || _b === void 0 ? void 0 : _b.href : (_c = pl['self']) === null || _c === void 0 ? void 0 : _c.href;
+                this.mrdViewAction.emit({ name, action: e.detail.action, href });
+            } })));
+    }
+    renderItem(item) {
+        var _a, _b;
+        switch (item.type) {
+            case index$1.ClientLayoutItemType.FIELD:
+                return this.renderField(item);
+            case index$1.ClientLayoutItemType.RELATION:
+                return this.renderRelation(item);
+            case index$1.ClientLayoutItemType.HEADER:
+                return (index.h("h2", { class: "mrd-layout-section__header", key: `header-${item.label}` }, item.label));
+            case index$1.ClientLayoutItemType.TEXT:
+                return index.h("div", { class: "mrd-layout-section__text", key: `text-${item.label}`, innerHTML: (_a = item.label) !== null && _a !== void 0 ? _a : '' });
+            case index$1.ClientLayoutItemType.NAVIGATE:
+                return (index.h("button", { class: "mrd-layout-section__navigate", key: `nav-${item.label}`, onClick: () => { var _a; return this.mrdNavigate.emit({ label: (_a = item.label) !== null && _a !== void 0 ? _a : '', navigate: item.navigate }); } }, item.label));
+            case index$1.ClientLayoutItemType.SEARCH:
+                return this.renderSearch(item);
+            case index$1.ClientLayoutItemType.SECTION:
+            case index$1.ClientLayoutItemType.GROUP:
+                return (index.h("div", { class: "mrd-layout-section__group", key: `group-${item.label}` }, item.label && index.h("h3", { class: "mrd-layout-section__group-title" }, item.label), ((_b = item.items) !== null && _b !== void 0 ? _b : []).map(child => this.renderItem(child))));
+            case index$1.ClientLayoutItemType.RELATED_VIEW:
+            case index$1.ClientLayoutItemType.VIEW:
+                return this.renderRelatedView(item);
+            default:
+                return null;
+        }
+    }
+    renderImageModal() {
+        if (!this.imagePreviewUrl)
+            return null;
+        return (index.h("div", { class: "mrd-layout-section__modal-backdrop", onClick: () => { this.imagePreviewUrl = null; } }, index.h("div", { class: "mrd-layout-section__modal", onClick: (e) => e.stopPropagation() }, index.h("button", { class: "mrd-layout-section__modal-close", onClick: () => { this.imagePreviewUrl = null; } }, "\u2715"), index.h("img", { class: "mrd-layout-section__modal-image", src: this.imagePreviewUrl, alt: "" }))));
+    }
+    render() {
+        return (index.h(index.Host, { key: '007077c73ddcc5c9e6ce546f083f42c07f8b94a4' }, index.h("div", { key: 'e9904536e9361d9a36d613c20af55ddf8d9acda6', class: "mrd-layout-section" }, this.items.map(item => this.renderItem(item))), this.renderImageModal()));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "links": [{
+                "linksChanged": 0
+            }],
+        "data": [{
+                "dataChanged": 0
+            }]
+    }; }
+};
+MrdLayoutSection.style = mrdLayoutSectionScss();
+
+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) {
+        index.registerInstance(this, hostRef);
+        this.mrdChange = index.createEvent(this, "mrdChange");
+        this.mrdBlur = index.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 (index.h(index.Host, null, index.h("div", { class: "mrd-list-field" }, this.label && (index.h("label", { class: `mrd-list-field__label${this.required ? ' mrd-list-field__label--required' : ''}` }, this.label)), index.h("div", { class: `mrd-list-field__checkbox-list${hasError ? ' mrd-list-field__checkbox-list--error' : ''}` }, this.listItems.map(lv => {
+                var _a, _b;
+                return (index.h("label", { key: lv.key, class: "mrd-list-field__checkbox-item" }, index.h("input", { type: "checkbox", checked: this.selected.includes(lv.key), disabled: this.disabled, onChange: () => this.toggleCheckbox(lv.key) }), (lv.color || lv.backgroundColor) && (index.h("span", { class: "mrd-list-field__color-dot", style: { backgroundColor: (_b = (_a = lv.backgroundColor) !== null && _a !== void 0 ? _a : lv.color) !== null && _b !== void 0 ? _b : '' } })), index.h("span", null, lv.label)));
+            })), hasError && index.h("span", { class: "mrd-list-field__error" }, this.error))));
+        }
+        return (index.h(index.Host, null, index.h("div", { class: "mrd-list-field" }, this.label && (index.h("label", { class: `mrd-list-field__label${this.required ? ' mrd-list-field__label--required' : ''}` }, this.label)), index.h("select", { class: `mrd-list-field__select${hasError ? ' mrd-list-field__select--error' : ''}`, name: this.name, required: this.required, disabled: this.disabled, onChange: this.handleSelectChange, onBlur: this.handleBlur }, index.h("option", { value: "" }, t('select_placeholder', this.locale)), this.listItems.map(lv => {
+            var _a, _b;
+            const bg = (_b = (_a = lv.backgroundColor) !== null && _a !== void 0 ? _a : lv.color) !== null && _b !== void 0 ? _b : null;
+            const style = bg ? { backgroundColor: bg, color: this.getContrastColor(bg) } : {};
+            return (index.h("option", { key: lv.key, value: lv.key, selected: lv.key === currentValue, style: style }, lv.label));
+        })), hasError && index.h("span", { class: "mrd-list-field__error" }, this.error))));
+    }
+};
+MrdListField.style = mrdListFieldScss();
+
+const mrdLongtextFieldScss = () => `.sc-mrd-longtext-field-h{display:block}.mrd-longtext-field.sc-mrd-longtext-field{display:flex;flex-direction:column;gap:var(--mrd-space-1);width:100%}.mrd-longtext-field__label.sc-mrd-longtext-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-longtext-field__label--required.sc-mrd-longtext-field::after{content:' *';color:var(--mrd-color-danger)}.mrd-longtext-field__input.sc-mrd-longtext-field{display:block;width:100%;min-height:calc(var(--mrd-input-height) * 5);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;resize:vertical;box-sizing:border-box;line-height:1.5}.mrd-longtext-field__input.sc-mrd-longtext-field::placeholder{color:var(--mrd-input-placeholder-color)}.mrd-longtext-field__input.sc-mrd-longtext-field:focus{border-color:var(--mrd-border-color-focus);box-shadow:var(--mrd-shadow-focus)}.mrd-longtext-field__input--error.sc-mrd-longtext-field{border-color:var(--mrd-border-color-error)}.mrd-longtext-field__input--error.sc-mrd-longtext-field:focus{box-shadow:var(--mrd-shadow-focus-error)}.mrd-longtext-field__content.sc-mrd-longtext-field{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);color:var(--mrd-input-color);white-space:pre-wrap;word-break:break-word;margin:0;padding:var(--mrd-input-padding-y) var(--mrd-input-padding-x);background-color:var(--mrd-input-bg-disabled);border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);line-height:1.5}.mrd-longtext-field__error.sc-mrd-longtext-field{font-family:var(--mrd-font-family);font-size:var(--mrd-error-font-size);color:var(--mrd-error-color)}`;
+
+const MrdLongtextField = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.mrdChange = index.createEvent(this, "mrdChange");
+        this.mrdBlur = index.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 (index.h(index.Host, { key: '3142f97e26fdef5547c8dd9d236ed8bc40d5c65f' }, index.h("div", { key: 'b78567596d8c6459c8e9b28ea6b02d3fe65fd16c', class: "mrd-longtext-field" }, this.label && (index.h("label", { key: 'e85d8657fcc49fc7e15c06b8a98b34c03738ef5b', class: `mrd-longtext-field__label${this.required ? ' mrd-longtext-field__label--required' : ''}` }, this.label)), this.disabled ? (index.h("pre", { class: "mrd-longtext-field__content" }, this.value)) : (index.h("textarea", { class: `mrd-longtext-field__input${hasError ? ' mrd-longtext-field__input--error' : ''}`, name: this.name, placeholder: this.placeholder, required: this.required, rows: 10, onInput: this.handleInput, onBlur: this.handleBlur }, this.value)), hasError && index.h("span", { key: '63cdcaf136e345197c42516f150752ec1d8665fa', class: "mrd-longtext-field__error" }, this.error))));
+    }
+};
+MrdLongtextField.style = mrdLongtextFieldScss();
+
+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) {
+        index.registerInstance(this, hostRef);
+        this.mrdChange = index.createEvent(this, "mrdChange");
+        this.mrdBlur = index.createEvent(this, "mrdBlur");
+        this.name = '';
+        this.label = '';
+        this.value = null;
+        this.placeholder = '';
+        this.required = false;
+        this.disabled = false;
+        this.locale = navigator.language;
+        this.dataType = index$1.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 === index$1.ClientLayoutItemFieldDataType.PERCENTAGE) {
+            return formatNumber(val, this.locale, {
+                minimumFractionDigits: 0,
+                maximumFractionDigits: this.decimalPrecision,
+            }) + '%';
+        }
+        if (this.dataType === index$1.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 === index$1.ClientLayoutItemFieldDataType.PERCENTAGE ? '%' :
+            this.dataType === index$1.ClientLayoutItemFieldDataType.DECIMAL ? '' : '';
+        return (index.h(index.Host, { key: 'ba3488fb12f72bb04164e3e94c028fb8a085f1f2' }, index.h("div", { key: '582e30a2a256c16cc3b0cab6e64460a0a5ec1fa2', class: "mrd-number-field" }, this.label && (index.h("label", { key: '87fe77ce80e888406ecedaa450e8c3d2a61c790a', class: `mrd-number-field__label${this.required ? ' mrd-number-field__label--required' : ''}` }, this.label)), index.h("div", { key: 'e3d8cf06f585add372e385d6e6ef7d60ece8071b', class: "mrd-number-field__input-wrapper" }, index.h("input", { key: '04710b67ee0dcb9db327e25b2467b1b3499bc9a8', 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 && index.h("span", { key: '9713244d784c82213ea835a5a6d47d468ccb0bb9', 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) {
+        index.registerInstance(this, hostRef);
+        this.mrdChange = index.createEvent(this, "mrdChange");
+        this.mrdBlur = index.createEvent(this, "mrdBlur");
+        this.mrdSearch = index.createEvent(this, "mrdSearch");
+        this.mrdFetchAll = index.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 = index$1.ClientLayoutItemRelationDisplayType.SEARCH;
+        this.multiple = false;
+        this.dropdownValues = [];
+        /** Plain href string/array for normal use; pass { id, label } objects to pre-fill a loaded record. */
+        this.value = null;
+        this.searchQuery = '';
+        this.searchResults = [];
+        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 !== index$1.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 === index$1.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 === index$1.ClientLayoutItemRelationEditBehavior.DROPDOWN) {
+            const currentValue = this.getValueHref();
+            return (index.h(index.Host, null, index.h("div", { class: "mrd-relation-field" }, this.label && (index.h("label", { class: `mrd-relation-field__label${this.required ? ' mrd-relation-field__label--required' : ''}` }, this.label)), index.h("select", { class: `mrd-relation-field__select${hasError ? ' mrd-relation-field__select--error' : ''}`, name: this.name, required: this.required, disabled: this.disabled, onChange: this.handleDropdownChange }, index.h("option", { value: "" }, t('select_placeholder', this.locale)), this.allRecords.map(record => (index.h("option", { key: record.id, value: record.id, selected: record.id === currentValue }, record.label)))), hasError && index.h("span", { class: "mrd-relation-field__error" }, this.error))));
+        }
+        if (this.displayType === index$1.ClientLayoutItemRelationDisplayType.DROPDOWN) {
+            const currentValue = Array.isArray(this.value) ? ((_a = this.value[0]) !== null && _a !== void 0 ? _a : '') : ((_b = this.value) !== null && _b !== void 0 ? _b : '');
+            return (index.h(index.Host, null, index.h("div", { class: "mrd-relation-field" }, this.label && (index.h("label", { class: `mrd-relation-field__label${this.required ? ' mrd-relation-field__label--required' : ''}` }, this.label)), index.h("select", { class: `mrd-relation-field__select${hasError ? ' mrd-relation-field__select--error' : ''}`, name: this.name, required: this.required, disabled: this.disabled, onChange: this.handleDropdownChange }, index.h("option", { value: "" }, t('select_placeholder', this.locale)), this.dropdownValues.map(dv => (index.h("option", { key: dv.key, value: dv.key, selected: dv.key === currentValue }, dv.label)))), hasError && index.h("span", { class: "mrd-relation-field__error" }, this.error))));
+        }
+        // SEARCH mode
+        const labelEl = this.label && (index.h("label", { class: `mrd-relation-field__label${this.required ? ' mrd-relation-field__label--required' : ''}` }, this.label));
+        // Single selection: show selected value as a badge, hide the search input
+        if (!this.multiple && this.selectedItems.length > 0) {
+            return (index.h(index.Host, null, index.h("div", { class: "mrd-relation-field" }, labelEl, index.h("div", { class: `mrd-relation-field__selected-value${hasError ? ' mrd-relation-field__selected-value--error' : ''}` }, index.h("span", { class: "mrd-relation-field__selected-name" }, this.selectedItems[0].label), index.h("button", { type: "button", class: "mrd-relation-field__selected-clear", onClick: this.clearSelection, "aria-label": t('remove', this.locale) }, "\u2715")), hasError && index.h("span", { class: "mrd-relation-field__error" }, this.error))));
+        }
+        return (index.h(index.Host, null, index.h("div", { class: "mrd-relation-field" }, labelEl, this.multiple && this.selectedItems.length > 0 && (index.h("div", { class: "mrd-relation-field__tags" }, this.selectedItems.map(item => (index.h("span", { key: item.id, class: "mrd-relation-field__tag" }, item.label, index.h("button", { type: "button", class: "mrd-relation-field__tag-remove", onClick: () => this.handleRemoveSelected(item.id), "aria-label": t('remove', this.locale) }, "\u2715")))))), index.h("div", { class: "mrd-relation-field__search-wrapper" }, index.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 && (index.h("span", { class: "mrd-relation-field__spinner", "aria-label": t('loading', this.locale) }))), this.showResults && (index.h("div", { class: "mrd-relation-field__results" }, this.searchResults.length === 0 && !this.isLoading ? (index.h("div", { class: "mrd-relation-field__no-results" }, t('no_results', this.locale))) : (this.searchResults.map((result, i) => (index.h("div", { key: result.id, class: `mrd-relation-field__result-item${i === this.highlightedIndex ? ' mrd-relation-field__result-item--highlighted' : ''}`, onMouseDown: () => this.handleResultSelect(result) }, index.h("span", { class: "mrd-relation-field__result-label" }, result.label), result.description && (index.h("span", { class: "mrd-relation-field__result-desc" }, result.description)))))))), hasError && index.h("span", { class: "mrd-relation-field__error" }, this.error))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "allRecords": [{
+                "allRecordsChanged": 0
+            }]
+    }; }
+};
+MrdRelationField.style = mrdRelationFieldScss();
+
+const mrdTableScss = () => `.sc-mrd-table-h{display:block;width:100%}.mrd-table__scroll.sc-mrd-table{overflow-y:auto;overflow-x:auto;border:1px solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);overflow-anchor:none}.mrd-table.sc-mrd-table{overflow-x:auto}.mrd-table__table.sc-mrd-table{width:auto;min-width:100%;border-collapse:collapse;font-size:var(--mrd-font-size-sm);color:var(--mrd-color-neutral-900)}.mrd-table__scroll.sc-mrd-table .mrd-table__table.sc-mrd-table{min-width:max-content}.mrd-table__header.sc-mrd-table{position:sticky;top:0;z-index:1;background:var(--mrd-color-white);text-align:left;padding:var(--mrd-space-2) var(--mrd-space-4);border-bottom:2px solid var(--mrd-border-color);color:var(--mrd-color-neutral-600);font-weight:var(--mrd-font-weight-medium);white-space:nowrap;font-size:var(--mrd-font-size-xs);text-transform:uppercase;letter-spacing:0.04em}.mrd-table__header--sortable.sc-mrd-table{cursor:pointer;user-select:none}.mrd-table__header--sortable.sc-mrd-table:hover{background:var(--mrd-color-neutral-50);color:var(--mrd-color-neutral-800)}.mrd-table__header--sorted-asc.sc-mrd-table,.mrd-table__header--sorted-desc.sc-mrd-table{color:var(--mrd-color-primary);border-bottom-color:var(--mrd-color-primary)}.mrd-table__header-label.sc-mrd-table{margin-right:var(--mrd-space-1)}.mrd-table__sort-icon.sc-mrd-table{font-size:0.85rem;opacity:0.4;vertical-align:middle}.mrd-table__header--sorted-asc.sc-mrd-table .mrd-table__sort-icon.sc-mrd-table,.mrd-table__header--sorted-desc.sc-mrd-table .mrd-table__sort-icon.sc-mrd-table{opacity:1;color:var(--mrd-color-primary)}.mrd-table__filter-icon.sc-mrd-table{display:inline-flex;align-items:center;vertical-align:middle;margin-left:var(--mrd-space-1);color:var(--mrd-color-primary)}.mrd-table__row.sc-mrd-table{border-bottom:1px solid var(--mrd-border-color)}.mrd-table__row.sc-mrd-table:hover{background:var(--mrd-color-neutral-200) !important}.mrd-table__row--clickable.sc-mrd-table{cursor:pointer}.mrd-table__spacer.sc-mrd-table{border:none}.mrd-table__spacer.sc-mrd-table td.sc-mrd-table{padding:0;border:none}.mrd-table__cell.sc-mrd-table{padding:var(--mrd-space-2) var(--mrd-space-4);vertical-align:top;white-space:nowrap}.mrd-table__cell--numeric.sc-mrd-table{text-align:right;font-variant-numeric:tabular-nums}.mrd-table__row--loading.sc-mrd-table{background:transparent}.mrd-table__cell--placeholder.sc-mrd-table{padding:var(--mrd-space-2) var(--mrd-space-4);border-bottom:1px solid var(--mrd-border-color)}.mrd-table__placeholder-bar.sc-mrd-table{display:block;height:0.75rem;width:55%;border-radius:var(--mrd-border-radius-sm);background:linear-gradient(     90deg,     var(--mrd-color-neutral-200) 25%,     var(--mrd-color-neutral-100) 50%,     var(--mrd-color-neutral-200) 75%   );background-size:200% 100%;animation:mrd-shimmer 1.4s ease infinite}@keyframes mrd-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}.mrd-table__toolbar.sc-mrd-table{display:flex;align-items:center;justify-content:space-between;padding-bottom:var(--mrd-space-2)}.mrd-table__toolbar-left.sc-mrd-table,.mrd-table__toolbar-right.sc-mrd-table{display:flex;gap:var(--mrd-space-2);align-items:center}.mrd-table__toolbar-center.sc-mrd-table{flex:1;display:flex;justify-content:center;align-items:center;gap:var(--mrd-space-1)}.mrd-table__view-title.sc-mrd-table{font-size:var(--mrd-font-size-sm);font-weight:600;color:var(--mrd-color-neutral-800)}.mrd-table__view-switcher.sc-mrd-table{position:relative}.mrd-table__view-switcher-btn.sc-mrd-table{display:inline-flex;align-items:center;gap:var(--mrd-space-1);background:none;border:none;cursor:pointer;padding:var(--mrd-space-1) var(--mrd-space-2);color:var(--mrd-color-neutral-400);font-size:var(--mrd-font-size-sm);border-radius:var(--mrd-border-radius);transition:color 0.15s, background-color 0.15s;line-height:1.4}.mrd-table__view-switcher-btn.sc-mrd-table:hover{color:var(--mrd-color-neutral-700);background-color:var(--mrd-color-neutral-50)}.mrd-table__view-switcher-label.sc-mrd-table{font-weight:var(--mrd-font-weight-medium)}.mrd-table__view-switcher-chevron.sc-mrd-table{width:1.1rem;height:1.1rem;flex-shrink:0;transition:transform 0.15s}.mrd-table__view-switcher-btn--open.sc-mrd-table .mrd-table__view-switcher-chevron.sc-mrd-table{transform:rotate(180deg)}.mrd-table__view-switcher-dropdown.sc-mrd-table{position:absolute;top:calc(100% + 4px);left:50%;transform:translateX(-50%);min-width:160px;background:var(--mrd-color-white);border:1px solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);box-shadow:var(--mrd-shadow-md, 0 4px 12px rgba(0,0,0,.12));z-index:var(--mrd-z-dropdown, 200);overflow:hidden}.mrd-table__view-switcher-item.sc-mrd-table{display:block;width:100%;padding:var(--mrd-space-2) var(--mrd-space-3);background:none;border:none;text-align:left;cursor:pointer;font-size:var(--mrd-font-size-sm);color:var(--mrd-color-neutral-700);white-space:nowrap;transition:background-color 0.1s, color 0.1s}.mrd-table__view-switcher-item.sc-mrd-table:hover{background-color:var(--mrd-color-neutral-50);color:var(--mrd-color-neutral-900)}.mrd-table__action.sc-mrd-table{position:relative;display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;background:transparent;border:1px solid transparent;border-radius:var(--mrd-border-radius);cursor:pointer;color:var(--mrd-color-neutral-400);transition:background-color 0.15s, border-color 0.15s, color 0.15s}.mrd-table__action.sc-mrd-table:hover{background-color:var(--mrd-color-neutral-100);border-color:var(--mrd-color-neutral-300);color:var(--mrd-color-neutral-700)}.mrd-table__action.sc-mrd-table:disabled{opacity:0.4;cursor:not-allowed}.mrd-table__action--primary.sc-mrd-table{color:var(--mrd-color-neutral-500)}.mrd-table__action--primary.sc-mrd-table:hover{background:var(--mrd-color-primary);border-color:var(--mrd-color-primary);color:var(--mrd-color-white)}.mrd-table__action--danger.sc-mrd-table{color:var(--mrd-color-error)}.mrd-table__action--danger.sc-mrd-table:hover{background-color:var(--mrd-color-error-light, #fef2f2);border-color:var(--mrd-color-error)}.mrd-table__action-icon.sc-mrd-table{width:1.25rem;height:1.25rem;pointer-events:none;fill:currentColor}.mrd-table__action-tooltip.sc-mrd-table{display:none;position:absolute;bottom:calc(100% + 6px);right:0;padding:var(--mrd-space-1) var(--mrd-space-2);font-size:var(--mrd-font-size-xs);white-space:nowrap;background:var(--mrd-color-tooltip, #fffce1);color:var(--mrd-color-neutral-900);border:1px solid var(--mrd-border-color);border-radius:var(--mrd-border-radius-sm, var(--mrd-border-radius));pointer-events:none;z-index:10}.mrd-table__action.sc-mrd-table:hover .mrd-table__action-tooltip.sc-mrd-table{display:block}.mrd-table__filter-toggle--active.sc-mrd-table{background:var(--mrd-color-primary);border-color:var(--mrd-color-primary);color:var(--mrd-color-white)}.mrd-table__filter-toggle--active.sc-mrd-table:hover{background:var(--mrd-color-primary-dark, var(--mrd-color-primary));border-color:var(--mrd-color-primary-dark, var(--mrd-color-primary));color:var(--mrd-color-white)}.mrd-table__filter-badge.sc-mrd-table{position:absolute;top:-6px;right:-6px;min-width:1.25rem;height:1.25rem;padding:0 3px;background:var(--mrd-color-error, #e53e3e);color:var(--mrd-color-white);border-radius:9999px;font-size:0.65rem;font-weight:var(--mrd-font-weight-medium);line-height:1.25rem;text-align:center;pointer-events:none}.mrd-table__header--filtered.sc-mrd-table{color:var(--mrd-color-primary);border-bottom-color:var(--mrd-color-primary)}.mrd-table__filter-popup.sc-mrd-table{position:fixed;width:280px;background:var(--mrd-color-white);border:1px solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);box-shadow:var(--mrd-shadow-md, 0 4px 12px rgba(0,0,0,.12));z-index:var(--mrd-z-dropdown, 200);font-size:var(--mrd-font-size-sm)}.mrd-table__filter-popup-header.sc-mrd-table{display:flex;align-items:center;justify-content:space-between;padding:var(--mrd-space-2) var(--mrd-space-3);border-bottom:1px solid var(--mrd-border-color)}.mrd-table__filter-popup-title.sc-mrd-table{font-weight:var(--mrd-font-weight-medium);color:var(--mrd-color-neutral-800);font-size:var(--mrd-font-size-sm)}.mrd-table__filter-close.sc-mrd-table{background:transparent;border:none;cursor:pointer;color:var(--mrd-color-neutral-500);font-size:0.9rem;padding:2px 4px;border-radius:3px;line-height:1}.mrd-table__filter-close.sc-mrd-table:hover{background:var(--mrd-color-neutral-100);color:var(--mrd-color-neutral-800)}.mrd-table__filter-section.sc-mrd-table{padding:var(--mrd-space-2) var(--mrd-space-3)}.mrd-table__filter-section-label.sc-mrd-table{font-size:var(--mrd-font-size-xs);font-weight:var(--mrd-font-weight-medium);text-transform:uppercase;letter-spacing:0.04em;color:var(--mrd-color-neutral-500);margin-bottom:var(--mrd-space-2)}.mrd-table__filter-sort-buttons.sc-mrd-table{display:flex;gap:var(--mrd-space-2)}.mrd-table__filter-sort-btn.sc-mrd-table{flex:1;padding:var(--mrd-space-1) var(--mrd-space-2);background:transparent;border:1px solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);cursor:pointer;font-size:var(--mrd-font-size-xs);color:var(--mrd-color-neutral-700)}.mrd-table__filter-sort-btn.sc-mrd-table:hover{background:var(--mrd-color-neutral-100)}.mrd-table__filter-sort-btn--active.sc-mrd-table{background:var(--mrd-color-primary);border-color:var(--mrd-color-primary);color:var(--mrd-color-white)}.mrd-table__filter-divider.sc-mrd-table{height:1px;background:var(--mrd-border-color);margin:0}.mrd-table__filter-editor.sc-mrd-table{display:flex;flex-direction:column;gap:var(--mrd-space-2)}.mrd-table__filter-select.sc-mrd-table,.mrd-table__filter-input.sc-mrd-table{width:100%;padding:var(--mrd-space-1) var(--mrd-space-2);border:1px solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);font-size:var(--mrd-font-size-sm);color:var(--mrd-color-neutral-900);background:var(--mrd-color-white);box-sizing:border-box}.mrd-table__filter-select.sc-mrd-table:focus,.mrd-table__filter-input.sc-mrd-table:focus{outline:none;border-color:var(--mrd-color-primary);box-shadow:0 0 0 2px rgba(0,0,0,.06)}.mrd-table__filter-range.sc-mrd-table{display:flex;align-items:center;gap:var(--mrd-space-1)}.mrd-table__filter-range.sc-mrd-table .mrd-table__filter-input.sc-mrd-table{flex:1;min-width:0}.mrd-table__filter-range-sep.sc-mrd-table{color:var(--mrd-color-neutral-400);flex-shrink:0}.mrd-table__filter-range--stacked.sc-mrd-table{flex-direction:column;align-items:stretch;gap:var(--mrd-space-2)}.mrd-table__filter-range-label.sc-mrd-table{font-size:var(--mrd-font-size-xs);color:var(--mrd-color-neutral-500);margin-bottom:2px}.mrd-table__filter-radio-group.sc-mrd-table{display:flex;flex-direction:column;gap:var(--mrd-space-1)}.mrd-table__filter-radio-group--inline.sc-mrd-table{flex-direction:row;gap:var(--mrd-space-3)}.mrd-table__filter-radio-label.sc-mrd-table{display:flex;align-items:center;gap:var(--mrd-space-1);cursor:pointer;font-size:var(--mrd-font-size-sm);color:var(--mrd-color-neutral-800)}.mrd-table__filter-list.sc-mrd-table{display:flex;flex-direction:column;gap:var(--mrd-space-1);max-height:180px;overflow-y:auto}.mrd-table__filter-list-controls.sc-mrd-table{display:flex;gap:var(--mrd-space-2);margin-bottom:var(--mrd-space-1)}.mrd-table__filter-list-btn.sc-mrd-table{font-size:var(--mrd-font-size-xs);color:var(--mrd-color-primary);background:transparent;border:none;cursor:pointer;padding:0;text-decoration:underline}.mrd-table__filter-checkbox-label.sc-mrd-table{display:flex;align-items:center;gap:var(--mrd-space-1);cursor:pointer;font-size:var(--mrd-font-size-sm);color:var(--mrd-color-neutral-800)}.mrd-table__filter-no-support.sc-mrd-table{font-size:var(--mrd-font-size-sm);color:var(--mrd-color-neutral-500);margin:0;font-style:italic}.mrd-table__filter-popup-footer.sc-mrd-table{display:flex;justify-content:flex-end;gap:var(--mrd-space-2);padding:var(--mrd-space-2) var(--mrd-space-3);border-top:1px solid var(--mrd-border-color)}.mrd-table__filter-btn.sc-mrd-table{padding:var(--mrd-space-1) var(--mrd-space-3);border-radius:var(--mrd-border-radius);border:1px solid var(--mrd-border-color);font-size:var(--mrd-font-size-sm);cursor:pointer}.mrd-table__filter-btn--clear.sc-mrd-table{background:transparent;color:var(--mrd-color-neutral-600)}.mrd-table__filter-btn--clear.sc-mrd-table:hover{background:var(--mrd-color-neutral-100)}.mrd-table__filter-btn--apply.sc-mrd-table{background:var(--mrd-color-primary);border-color:var(--mrd-color-primary);color:var(--mrd-color-white)}.mrd-table__filter-btn--apply.sc-mrd-table:hover{background:var(--mrd-color-primary-dark, var(--mrd-color-primary));border-color:var(--mrd-color-primary-dark, var(--mrd-color-primary))}.mrd-table__totals-row.sc-mrd-table{border-top:2px solid var(--mrd-border-color)}.mrd-table__totals-cell.sc-mrd-table{position:sticky;bottom:0;z-index:2;padding:var(--mrd-space-2) var(--mrd-space-4);background:var(--mrd-color-white);font-weight:var(--mrd-font-weight-medium);font-variant-numeric:tabular-nums;white-space:nowrap;border-top:2px solid var(--mrd-border-color)}.mrd-table__totals-cell--numeric.sc-mrd-table{text-align:right}.mrd-table__footer.sc-mrd-table{padding:var(--mrd-space-1) var(--mrd-space-2);font-size:var(--mrd-font-size-xs);color:var(--mrd-color-neutral-500);text-align:right}.mrd-table__empty.sc-mrd-table{padding:var(--mrd-space-4) var(--mrd-space-3);color:var(--mrd-color-neutral-500);font-size:var(--mrd-font-size-sm);text-align:center;margin:0}.mrd-table__file-btn.sc-mrd-table{display:inline-flex;align-items:center;gap:var(--mrd-space-1);background:none;border:none;padding:0;cursor:pointer;color:var(--mrd-color-primary);font-size:var(--mrd-font-size-sm);font-family:inherit;max-width:100%;overflow:hidden}.mrd-table__file-btn.sc-mrd-table:hover{text-decoration:underline;color:var(--mrd-color-primary-dark)}.mrd-table__file-icon.sc-mrd-table{flex-shrink:0;width:1rem;height:1rem}.mrd-table__textblock-btn.sc-mrd-table{display:inline;background:none;border:none;padding:0 0 0 var(--mrd-space-1);cursor:pointer;color:var(--mrd-color-primary);font-size:var(--mrd-font-size-sm);font-family:inherit;line-height:inherit;vertical-align:middle}.mrd-table__textblock-btn.sc-mrd-table:hover{color:var(--mrd-color-primary-dark)}.mrd-table__modal-backdrop.sc-mrd-table{position:fixed;inset:0;background:rgba(0, 0, 0, 0.4);z-index:var(--mrd-z-modal, 300);display:flex;align-items:center;justify-content:center}.mrd-table__modal.sc-mrd-table{background:#fff;border-radius:var(--mrd-radius-md, 0.5rem);padding:var(--mrd-space-6);max-width:min(600px, 90vw);max-height:70vh;overflow-y:auto;position:relative;box-shadow:var(--mrd-shadow-lg)}.mrd-table__modal-close.sc-mrd-table{position:absolute;top:var(--mrd-space-3);right:var(--mrd-space-3);background:none;border:none;cursor:pointer;font-size:1.25rem;line-height:1;color:var(--mrd-color-text-muted, #6b7280);padding:0}.mrd-table__modal-close.sc-mrd-table:hover{color:var(--mrd-color-text, #111827)}.mrd-table__modal-text.sc-mrd-table{margin:0;padding-right:var(--mrd-space-6);white-space:pre-wrap;word-break:break-word;font-size:var(--mrd-font-size-sm);line-height:1.6}.mrd-table__json-preview.sc-mrd-table{font-family:var(--mrd-font-family-mono);font-size:var(--mrd-font-size-xs);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block;max-width:calc(100% - 1.5rem);vertical-align:middle}.mrd-table__modal-json.sc-mrd-table{margin:0;padding-right:var(--mrd-space-6);font-family:var(--mrd-font-family-mono);font-size:var(--mrd-font-size-xs);white-space:pre-wrap;word-break:break-word;line-height:1.6;background:none;border:none}`;
+
+const BUFFER = 10;
+/** Wacht deze tijd (ms) na het laatste scroll-event voordat pagina's worden
+ *  aangevraagd. Pagina's die de gebruiker snel voorbij scrollt worden zo geskipt. */
+const REQUEST_DEBOUNCE_MS = 150;
+/** Breedte van de filterpopup in px — voor overflow-correctie. */
+const POPUP_WIDTH = 280;
+const TEXT_TYPES = new Set(['TEXT', 'TEXTBLOCK', 'EMAIL', 'HYPERLINK']);
+const NUMERIC_TYPES = new Set(['INTEGER', 'DECIMAL', 'PERCENTAGE', 'CURRENCY']);
+const DATE_TYPES = new Set(['DATE', 'DATETIME', 'TIME']);
+const NO_FILTER_TYPES = new Set(['FILE', 'IMAGE']);
+/** Column types that cannot be sorted or filtered (not stored in PostgreSQL). */
+const NON_INTERACTIVE_TYPES = new Set(['LONGTEXT', 'JSON']);
+const MrdTable = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.mrdLoadPage = index.createEvent(this, "mrdLoadPage");
+        this.mrdRowClick = index.createEvent(this, "mrdRowClick");
+        this.mrdAction = index.createEvent(this, "mrdAction");
+        this.mrdFilter = index.createEvent(this, "mrdFilter");
+        this.mrdDownload = index.createEvent(this, "mrdDownload");
+        this.mrdSwitchView = index.createEvent(this, "mrdSwitchView");
+        this.mrdLoadAggregations = index.createEvent(this, "mrdLoadAggregations");
+        // ── Non-state internals ────────────────────────────────────────────────────
+        this.pendingPages = new Set();
+        this.debounceTimer = null;
+        this.outsideClickHandler = null;
+        this.viewSwitcherClickHandler = null;
+        this.keydownHandler = null;
+        // ── Props ──────────────────────────────────────────────────────────────────
+        this.columns = [];
+        /** Direct rows (non-paginated mode, used when totalElements === 0). */
+        this.rows = [];
+        this.locale = navigator.language;
+        /** Total number of records across all pages. 0 = non-paginated mode. */
+        this.totalElements = 0;
+        /** Records per page (must match the API page size). */
+        this.pageSize = 20;
+        /** Row height in px — used for spacer and scroll-position maths. */
+        this.rowHeight = 36;
+        /** Height of the scroll container in px. */
+        this.tableHeight = 500;
+        /** Initial sort applied on load, e.g. "timestamp,desc" or "name".
+         *  Parsed by init() into sortField + sortDir. */
+        this.defaultSort = '';
+        /** Toolbar action buttons rendered above the table. */
+        this.actions = [];
+        /** Display label of the current view — shown in the toolbar center as a view picker trigger. */
+        this.viewLabel = '';
+        /** Alternative views available for this table; renders a dropdown when non-empty. */
+        this.alternativeViews = [];
+        // ── Internal state ─────────────────────────────────────────────────────────
+        this.loadedPages = new Map();
+        this.requestedPages = new Set();
+        this.renderStart = 0;
+        this.renderEnd = 0;
+        this.colWidths = [];
+        this.sortField = '';
+        this.sortDir = 'asc';
+        /** Whether the filter UI is visible on column headers. */
+        this.filterMode = false;
+        /** Active filters keyed by field name. */
+        this.activeFilters = new Map();
+        /** Field name of the currently open filter popup (null = closed). */
+        this.openFilterCol = null;
+        /** Filter state being edited in the open popup. */
+        this.pendingFilter = null;
+        /** Viewport-relative position for the filter popup. */
+        this.popupPos = { top: 0, left: 0 };
+        /** Current scroll offset of the scroll container — drives pagination footer. */
+        this.scrollTop = 0;
+        /** Full text shown in the TEXTBLOCK expand modal (null = closed). */
+        this.textblockModal = null;
+        /** Syntax-highlighted JSON HTML shown in the JSON expand modal (null = closed). */
+        this.jsonModal = null;
+        /** Aggregation totals received from the host via setAggregations(). Null = not yet loaded. */
+        this.aggregations = null;
+        /** Whether the view switcher dropdown is open. */
+        this.viewSwitcherOpen = false;
+        this.handleScroll = (e) => {
+            const scroller = e.currentTarget;
+            const scrollTop = scroller.scrollTop;
+            const total = this.totalElements;
+            const visStart = Math.floor(scrollTop / this.rowHeight);
+            const visEnd = Math.min(visStart + this.visibleCount(), total - 1);
+            this.scrollTop = scrollTop;
+            this.renderStart = Math.max(0, visStart - BUFFER);
+            this.renderEnd = Math.min(total - 1, visEnd + BUFFER);
+            this.requestPagesForWindow(this.renderStart, this.renderEnd);
+        };
+    }
+    // ── Prop watchers ─────────────────────────────────────────────────────────
+    /** Clamp renderEnd when totalElements shrinks (e.g. after a filter is applied). */
+    totalElementsChanged(newVal) {
+        this.renderEnd = Math.min(this.renderEnd, Math.max(0, newVal - 1));
+    }
+    // ── Public API ─────────────────────────────────────────────────────────────
+    /**
+     * Initialise (or reset) the virtual scroll.
+     * Call after setting all props and registering the mrdLoadPage listener,
+     * but before calling setPage(0, rows).
+     */
+    async init() {
+        var _a;
+        if (this.debounceTimer !== null) {
+            clearTimeout(this.debounceTimer);
+            this.debounceTimer = null;
+        }
+        this.pendingPages.clear();
+        this.loadedPages = new Map();
+        this.requestedPages = new Set();
+        this.colWidths = [];
+        if (this.defaultSort) {
+            const parts = this.defaultSort.split(',');
+            this.sortField = parts[0].trim();
+            this.sortDir = ((_a = parts[1]) === null || _a === void 0 ? void 0 : _a.trim()) === 'desc' ? 'desc' : 'asc';
+        }
+        else {
+            this.sortField = '';
+            this.sortDir = 'asc';
+        }
+        this.scrollTop = 0;
+        this.renderStart = 0;
+        // No BUFFER on init — only request what fits the visible area (page 0).
+        // BUFFER is applied during scroll to pre-fetch the next page proactively.
+        this.renderEnd = Math.max(0, Math.min(this.visibleCount() - 1, this.totalElements - 1));
+        const scroller = this.el.querySelector('.mrd-table__scroll');
+        if (scroller)
+            scroller.scrollTop = 0;
+        this.aggregations = null;
+        this.emitLoadAggregations();
+    }
+    /**
+     * Inject the rows for a given page (0-based).
+     * Creates a new Map reference so Stencil detects the state change.
+     *
+     * When the page contains fewer rows than pageSize it is the last page.
+     * renderEnd is clamped immediately so no loading-placeholder rows appear
+     * beyond the actual data — without requiring the host to update totalElements.
+     */
+    async setPage(pageNumber, rows) {
+        if (rows.length < this.pageSize) {
+            // lastRowIdx is -1 when the page is empty; clamp renderEnd to -1 so the
+            // render loop does not execute and no shimmer rows appear.
+            const lastRowIdx = pageNumber * this.pageSize + rows.length - 1;
+            this.renderEnd = Math.min(this.renderEnd, lastRowIdx);
+        }
+        const next = new Map(this.loadedPages);
+        next.set(pageNumber, rows);
+        this.loadedPages = next;
+    }
+    /** Inject aggregation totals returned by the /aggregations endpoint. */
+    async setAggregations(data) {
+        this.aggregations = data;
+    }
+    // ── Lifecycle ──────────────────────────────────────────────────────────────
+    disconnectedCallback() {
+        if (this.outsideClickHandler) {
+            document.removeEventListener('click', this.outsideClickHandler);
+            this.outsideClickHandler = null;
+        }
+        if (this.viewSwitcherClickHandler) {
+            document.removeEventListener('click', this.viewSwitcherClickHandler);
+            this.viewSwitcherClickHandler = null;
+        }
+        if (this.keydownHandler) {
+            document.removeEventListener('keydown', this.keydownHandler);
+            this.keydownHandler = null;
+        }
+    }
+    componentDidRender() {
+        if (this.colWidths.length === 0 && this.loadedPages.size > 0 && this.totalElements > 0) {
+            const ths = this.el.querySelectorAll('.mrd-table__header');
+            if (ths.length > 0) {
+                this.colWidths = Array.from(ths).map(th => th.offsetWidth);
+            }
+        }
+    }
+    // ── Paging / scroll helpers ────────────────────────────────────────────────
+    visibleCount() {
+        return Math.ceil(this.tableHeight / this.rowHeight);
+    }
+    sortParam() {
+        if (!this.sortField)
+            return '';
+        return this.sortDir === 'desc' ? `${this.sortField},desc` : this.sortField;
+    }
+    colName(col) {
+        var _a, _b, _c, _d;
+        return (_d = (_b = (_a = col.field) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : (_c = col.relation) === null || _c === void 0 ? void 0 : _c.name) !== null && _d !== void 0 ? _d : '';
+    }
+    colDataType(col) {
+        var _a, _b;
+        if (col.type === 'RELATION')
+            return 'RELATION';
+        return (_b = (_a = col.field) === null || _a === void 0 ? void 0 : _a.dataType) !== null && _b !== void 0 ? _b : 'TEXT';
+    }
+    // ── Aggregation helpers ────────────────────────────────────────────────────
+    buildAggregationParams() {
+        var _a;
+        const groups = { sum: [], avg: [], count: [] };
+        for (const col of this.columns) {
+            if (col.type !== 'FIELD' || !((_a = col.field) === null || _a === void 0 ? void 0 : _a.aggregate))
+                continue;
+            const fn = col.field.aggregate.toLowerCase();
+            if (fn in groups)
+                groups[fn].push(col.field.name);
+        }
+        const params = {};
+        if (groups.sum.length)
+            params.sum = groups.sum;
+        if (groups.avg.length)
+            params.avg = groups.avg;
+        if (groups.count.length)
+            params.count = groups.count;
+        return Object.keys(params).length > 0 ? params : null;
+    }
+    emitLoadAggregations() {
+        const params = this.buildAggregationParams();
+        if (params)
+            this.mrdLoadAggregations.emit(params);
+    }
+    renderAggregationValue(col) {
+        var _a, _b;
+        if (col.type !== 'FIELD' || !((_a = col.field) === null || _a === void 0 ? void 0 : _a.aggregate) || !this.aggregations)
+            return '';
+        const fn = col.field.aggregate.toLowerCase();
+        const val = (_b = this.aggregations[fn]) === null || _b === void 0 ? void 0 : _b[col.field.name];
+        if (val == null)
+            return '';
+        const dt = col.field.dataType;
+        if (dt === 'INTEGER')
+            return formatNumber(val, this.locale, { maximumFractionDigits: 0 });
+        if (dt === 'PERCENTAGE')
+            return formatPercentage(val, this.locale);
+        if (dt === 'CURRENCY' && col.field.currencyCode)
+            return formatCurrency(val, col.field.currencyCode, this.locale);
+        return formatNumber(val, this.locale);
+    }
+    // ── Reset pagination ───────────────────────────────────────────────────────
+    /** Reset pagination state and scroll to top (used after sort or filter change). */
+    resetPages() {
+        if (this.debounceTimer !== null) {
+            clearTimeout(this.debounceTimer);
+            this.debounceTimer = null;
+        }
+        this.pendingPages.clear();
+        this.loadedPages = new Map();
+        this.requestedPages = new Set();
+        this.colWidths = [];
+        this.scrollTop = 0;
+        this.renderStart = 0;
+        // No BUFFER here — totalElements may be stale after a filter change.
+        // Only request what is visible; BUFFER kicks in during scroll as usual.
+        this.renderEnd = Math.max(0, Math.min(this.visibleCount() - 1, this.totalElements - 1));
+        const scroller = this.el.querySelector('.mrd-table__scroll');
+        if (scroller)
+            scroller.scrollTop = 0;
+    }
+    handleSortClick(col) {
+        const name = this.colName(col);
+        if (this.sortField === name) {
+            this.sortDir = this.sortDir === 'asc' ? 'desc' : 'asc';
+        }
+        else {
+            this.sortField = name;
+            this.sortDir = 'asc';
+        }
+        this.resetPages();
+        this.emitPagesForWindow(this.renderStart, this.renderEnd);
+    }
+    applySort(col, dir) {
+        this.sortField = this.colName(col);
+        this.sortDir = dir;
+        this.resetPages();
+        this.emitPagesForWindow(this.renderStart, this.renderEnd);
+    }
+    emitPagesForWindow(start, end) {
+        const firstPage = Math.floor(start / this.pageSize);
+        const lastPage = Math.floor(end / this.pageSize);
+        const next = new Set(this.requestedPages);
+        let changed = false;
+        for (let p = firstPage; p <= lastPage; p++) {
+            if (!this.loadedPages.has(p) && !next.has(p)) {
+                next.add(p);
+                this.mrdLoadPage.emit({ page: p, sort: this.sortParam() });
+                changed = true;
+            }
+        }
+        if (changed)
+            this.requestedPages = next;
+    }
+    getRow(i) {
+        var _a;
+        const page = this.loadedPages.get(Math.floor(i / this.pageSize));
+        return (_a = page === null || page === void 0 ? void 0 : page[i % this.pageSize]) !== null && _a !== void 0 ? _a : null;
+    }
+    requestPagesForWindow(start, end) {
+        const firstPage = Math.floor(start / this.pageSize);
+        const lastPage = Math.floor(end / this.pageSize);
+        let anyNew = false;
+        for (let p = firstPage; p <= lastPage; p++) {
+            if (!this.loadedPages.has(p) && !this.requestedPages.has(p) && !this.pendingPages.has(p)) {
+                this.pendingPages.add(p);
+                anyNew = true;
+            }
+        }
+        if (!anyNew)
+            return;
+        if (this.debounceTimer !== null)
+            clearTimeout(this.debounceTimer);
+        this.debounceTimer = setTimeout(() => this.flushPendingPages(), REQUEST_DEBOUNCE_MS);
+    }
+    flushPendingPages() {
+        this.debounceTimer = null;
+        if (this.pendingPages.size === 0)
+            return;
+        const next = new Set(this.requestedPages);
+        let changed = false;
+        for (const page of this.pendingPages) {
+            if (this.loadedPages.has(page) || next.has(page))
+                continue;
+            const pageStart = page * this.pageSize;
+            const pageEnd = pageStart + this.pageSize - 1;
+            if (pageEnd < this.renderStart || pageStart > this.renderEnd)
+                continue;
+            next.add(page);
+            this.mrdLoadPage.emit({ page, sort: this.sortParam() });
+            changed = true;
+        }
+        this.pendingPages.clear();
+        if (changed)
+            this.requestedPages = next;
+    }
+    // ── Filter helpers ─────────────────────────────────────────────────────────
+    handleFilterToggle() {
+        this.filterMode = !this.filterMode;
+        if (!this.filterMode)
+            this.closeFilterPopup();
+    }
+    handleFilterOpen(col, e) {
+        e.stopPropagation();
+        const btn = e.currentTarget;
+        const rect = btn.getBoundingClientRect();
+        let left = rect.left;
+        if (left + POPUP_WIDTH > window.innerWidth - 8)
+            left = rect.right - POPUP_WIDTH;
+        this.popupPos = { top: rect.bottom + 4, left: Math.max(8, left) };
+        const name = this.colName(col);
+        const dataType = this.colDataType(col);
+        const existing = this.activeFilters.get(name);
+        // Set the default operator explicitly so it is present in the ColumnFilter
+        // even when the user never touches the operator dropdown.
+        const defaultOperator = (TEXT_TYPES.has(dataType) || dataType === 'RELATION')
+            ? 'startsWith'
+            : undefined;
+        // For DATETIME, stored values are UTC ISO strings; convert back to local
+        // "YYYY-MM-DD" dates so the date inputs show what the user originally entered.
+        // If from and to cover the same local day it was an exact-date filter — restore
+        // to exact mode so the user sees the single-date input again.
+        if (dataType === 'DATETIME' && existing && existing.operator !== 'isEmpty' && existing.operator !== 'isNotEmpty') {
+            const display = Object.assign({}, existing);
+            if (typeof display.from === 'string' && display.from)
+                display.from = this.utcISOToLocalDate(display.from);
+            if (typeof display.to === 'string' && display.to)
+                display.to = this.utcISOToLocalDateExclusiveEnd(display.to);
+            if (display.from && display.to && display.from === display.to) {
+                this.pendingFilter = Object.assign(Object.assign({}, display), { value: display.from, from: undefined, to: undefined });
+            }
+            else {
+                this.pendingFilter = display;
+            }
+        }
+        else {
+            this.pendingFilter = existing ? Object.assign({}, existing) : { field: name, dataType, operator: defaultOperator };
+        }
+        this.openFilterCol = name;
+        // Close on outside click — re-register to replace any stale handler
+        if (this.outsideClickHandler)
+            document.removeEventListener('click', this.outsideClickHandler);
+        this.outsideClickHandler = (ev) => {
+            const popup = this.el.querySelector('.mrd-table__filter-popup');
+            if (popup && !popup.contains(ev.target))
+                this.closeFilterPopup();
+        };
+        document.addEventListener('click', this.outsideClickHandler);
+    }
+    closeFilterPopup() {
+        this.openFilterCol = null;
+        this.pendingFilter = null;
+        if (this.outsideClickHandler) {
+            document.removeEventListener('click', this.outsideClickHandler);
+            this.outsideClickHandler = null;
+        }
+    }
+    openTextblockModal(text) {
+        this.textblockModal = text;
+        if (this.keydownHandler)
+            document.removeEventListener('keydown', this.keydownHandler);
+        this.keydownHandler = (ev) => {
+            if (ev.key === 'Escape')
+                this.closeTextblockModal();
+        };
+        document.addEventListener('keydown', this.keydownHandler);
+    }
+    closeTextblockModal() {
+        this.textblockModal = null;
+        if (this.keydownHandler) {
+            document.removeEventListener('keydown', this.keydownHandler);
+            this.keydownHandler = null;
+        }
+    }
+    openJsonModal(html) {
+        this.jsonModal = html;
+        if (this.keydownHandler)
+            document.removeEventListener('keydown', this.keydownHandler);
+        this.keydownHandler = (ev) => {
+            if (ev.key === 'Escape')
+                this.closeJsonModal();
+        };
+        document.addEventListener('keydown', this.keydownHandler);
+    }
+    closeJsonModal() {
+        this.jsonModal = null;
+        if (this.keydownHandler) {
+            document.removeEventListener('keydown', this.keydownHandler);
+            this.keydownHandler = null;
+        }
+    }
+    setPending(key, val) {
+        this.pendingFilter = Object.assign(Object.assign({}, this.pendingFilter), { [key]: val });
+    }
+    togglePendingValue(key, checked) {
+        var _a, _b;
+        const current = (_b = (_a = this.pendingFilter) === null || _a === void 0 ? void 0 : _a.values) !== null && _b !== void 0 ? _b : [];
+        this.pendingFilter = Object.assign(Object.assign({}, this.pendingFilter), { values: checked ? [...current, key] : current.filter(k => k !== key) });
+    }
+    filterHasValue(f) {
+        if (f.operator === 'isEmpty' || f.operator === 'isNotEmpty')
+            return true;
+        if (f.values !== undefined && f.values.length > 0)
+            return true;
+        if (f.value != null && f.value !== '')
+            return true;
+        if (typeof f.value === 'boolean')
+            return true;
+        if (f.from != null && f.from !== '')
+            return true;
+        if (f.to != null && f.to !== '')
+            return true;
+        return false;
+    }
+    // Convert a local "YYYY-MM-DD" date string to the UTC ISO string at the
+    // start of that local day (midnight). new Date(y, m, d) uses local time.
+    dateLocalToUTCStart(dateStr) {
+        if (!dateStr)
+            return dateStr;
+        const [year, month, day] = dateStr.split('-').map(Number);
+        return new Date(year, month - 1, day).toISOString().replace(/\.\d{3}Z$/, 'Z');
+    }
+    // Start of the day AFTER the given local date (exclusive range end).
+    dateLocalToUTCEndExclusive(dateStr) {
+        if (!dateStr)
+            return dateStr;
+        const [year, month, day] = dateStr.split('-').map(Number);
+        return new Date(year, month - 1, day + 1).toISOString().replace(/\.\d{3}Z$/, 'Z');
+    }
+    // Convert a stored UTC ISO string back to the local "YYYY-MM-DD" date.
+    utcISOToLocalDate(utcStr) {
+        if (!utcStr)
+            return utcStr;
+        const d = new Date(utcStr);
+        if (isNaN(d.getTime()))
+            return utcStr;
+        return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
+    }
+    // The stored "to" value is the exclusive end (midnight of the next day).
+    // Subtract one day to recover the local date the user entered.
+    utcISOToLocalDateExclusiveEnd(utcStr) {
+        if (!utcStr)
+            return utcStr;
+        const d = new Date(utcStr);
+        if (isNaN(d.getTime()))
+            return utcStr;
+        d.setDate(d.getDate() - 1);
+        return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
+    }
+    applyFilter() {
+        const f = this.pendingFilter;
+        if (!(f === null || f === void 0 ? void 0 : f.field)) {
+            this.closeFilterPopup();
+            return;
+        }
+        // For DATETIME fields the user enters local dates; convert to UTC ISO strings.
+        // Exact date → range covering the full local day (from = midnight, to = next midnight).
+        // "to" is always the exclusive end (midnight of the next local day).
+        let normalized = Object.assign({}, f);
+        if (f.dataType === 'DATETIME' && f.operator !== 'isEmpty' && f.operator !== 'isNotEmpty') {
+            if (typeof normalized.value === 'string' && normalized.value) {
+                normalized.from = this.dateLocalToUTCStart(normalized.value);
+                normalized.to = this.dateLocalToUTCEndExclusive(normalized.value);
+                normalized.value = undefined;
+            }
+            else {
+                if (typeof normalized.from === 'string' && normalized.from)
+                    normalized.from = this.dateLocalToUTCStart(normalized.from);
+                if (typeof normalized.to === 'string' && normalized.to)
+                    normalized.to = this.dateLocalToUTCEndExclusive(normalized.to);
+            }
+        }
+        const next = new Map(this.activeFilters);
+        if (this.filterHasValue(normalized)) {
+            next.set(normalized.field, normalized);
+        }
+        else {
+            next.delete(normalized.field);
+        }
+        this.activeFilters = next;
+        this.closeFilterPopup();
+        this.mrdFilter.emit({ filters: Array.from(this.activeFilters.values()) });
+        this.aggregations = null;
+        this.emitLoadAggregations();
+        if (this.totalElements > 0) {
+            this.resetPages();
+            this.emitPagesForWindow(this.renderStart, this.renderEnd);
+        }
+    }
+    clearFilter() {
+        const name = this.openFilterCol;
+        const next = new Map(this.activeFilters);
+        if (name)
+            next.delete(name);
+        this.activeFilters = next;
+        this.closeFilterPopup();
+        this.mrdFilter.emit({ filters: Array.from(this.activeFilters.values()) });
+        this.aggregations = null;
+        this.emitLoadAggregations();
+        if (this.totalElements > 0) {
+            this.resetPages();
+            this.emitPagesForWindow(this.renderStart, this.renderEnd);
+        }
+    }
+    clearAllFilters() {
+        this.activeFilters = new Map();
+        this.mrdFilter.emit({ filters: [] });
+        this.aggregations = null;
+        this.emitLoadAggregations();
+        if (this.totalElements > 0) {
+            this.resetPages();
+            this.emitPagesForWindow(this.renderStart, this.renderEnd);
+        }
+    }
+    // ── View switcher ──────────────────────────────────────────────────────────
+    openViewSwitcher() {
+        this.viewSwitcherOpen = true;
+        if (this.viewSwitcherClickHandler)
+            document.removeEventListener('click', this.viewSwitcherClickHandler);
+        this.viewSwitcherClickHandler = (ev) => {
+            const wrapper = this.el.querySelector('.mrd-table__view-switcher');
+            if (wrapper && !wrapper.contains(ev.target))
+                this.closeViewSwitcher();
+        };
+        document.addEventListener('click', this.viewSwitcherClickHandler);
+    }
+    closeViewSwitcher() {
+        this.viewSwitcherOpen = false;
+        if (this.viewSwitcherClickHandler) {
+            document.removeEventListener('click', this.viewSwitcherClickHandler);
+            this.viewSwitcherClickHandler = null;
+        }
+    }
+    handleViewSwitch(view) {
+        this.closeViewSwitcher();
+        this.mrdSwitchView.emit({ name: view.name, class: view.class });
+    }
+    renderViewSwitcher() {
+        return (index.h("div", { class: "mrd-table__view-switcher" }, index.h("button", { class: `mrd-table__view-switcher-btn${this.viewSwitcherOpen ? ' mrd-table__view-switcher-btn--open' : ''}`, "aria-label": this.viewLabel, onClick: (e) => {
+                e.stopPropagation();
+                this.viewSwitcherOpen ? this.closeViewSwitcher() : this.openViewSwitcher();
+            } }, index.h("svg", { class: "mrd-table__view-switcher-chevron", viewBox: "0 0 24 24", "aria-hidden": "true" }, index.h("path", { fill: "currentColor", d: "M7 10l5 5 5-5z" }))), this.viewSwitcherOpen && (index.h("div", { class: "mrd-table__view-switcher-dropdown", onClick: (e) => e.stopPropagation() }, this.alternativeViews.map(view => {
+            var _a;
+            return (index.h("button", { class: "mrd-table__view-switcher-item", onClick: () => this.handleViewSwitch(view) }, (_a = view.label) !== null && _a !== void 0 ? _a : view.name));
+        })))));
+    }
+    // ── Render: toolbar ────────────────────────────────────────────────────────
+    renderToolbar() {
+        var _a, _b;
+        const filterCount = this.activeFilters.size;
+        const hasActions = ((_a = this.actions) === null || _a === void 0 ? void 0 : _a.length) > 0;
+        const hasViewSwitcher = !!this.viewLabel && ((_b = this.alternativeViews) === null || _b === void 0 ? void 0 : _b.length) > 0;
+        return (index.h("div", { class: "mrd-table__toolbar" }, index.h("div", { class: "mrd-table__toolbar-left" }, index.h("button", { class: `mrd-table__action mrd-table__action--secondary mrd-table__filter-toggle${this.filterMode ? ' mrd-table__filter-toggle--active' : ''}`, onClick: () => this.handleFilterToggle() }, index.h("svg", { class: "mrd-table__action-icon", viewBox: "0 0 24 24", "aria-hidden": "true" }, index.h("path", { fill: "currentColor", d: "M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z" })), filterCount > 0 && index.h("span", { class: "mrd-table__filter-badge" }, filterCount), index.h("span", { class: "mrd-table__action-tooltip" }, this.filterMode ? t('table_filter_hide', this.locale) : t('table_filter', this.locale), filterCount > 0 ? ` (${filterCount} ${t('table_filter_active', this.locale)})` : '')), filterCount > 0 && (index.h("button", { class: "mrd-table__action mrd-table__action--secondary", onClick: () => this.clearAllFilters() }, index.h("svg", { class: "mrd-table__action-icon", viewBox: "0 0 24 24", "aria-hidden": "true" }, index.h("path", { fill: "currentColor", d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" })), index.h("span", { class: "mrd-table__action-tooltip" }, t('table_filter_clear_all', this.locale))))), hasViewSwitcher && (index.h("div", { class: "mrd-table__toolbar-center" }, index.h("span", { class: "mrd-table__view-title" }, this.viewLabel), this.renderViewSwitcher())), hasActions && (index.h("div", { class: "mrd-table__toolbar-right" }, this.actions.map(a => {
+            var _a;
+            return (index.h("button", { class: `mrd-table__action mrd-table__action--${(_a = a.variant) !== null && _a !== void 0 ? _a : 'secondary'}`, disabled: a.disabled, onClick: () => this.mrdAction.emit({ action: a.action }) }, a.icon
+                ? index.h("svg", { class: "mrd-table__action-icon", "aria-hidden": "true" }, index.h("use", { href: a.icon }))
+                : a.label, index.h("span", { class: "mrd-table__action-tooltip" }, a.label)));
+        })))));
+    }
+    // ── Render: filter popup ───────────────────────────────────────────────────
+    renderFilterEditor(col) {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const pf = (_a = this.pendingFilter) !== null && _a !== void 0 ? _a : {};
+        const dataType = this.colDataType(col);
+        if (NO_FILTER_TYPES.has(dataType)) {
+            return index.h("p", { class: "mrd-table__filter-no-support" }, t('filter_no_support', this.locale));
+        }
+        if (dataType === 'BOOLEAN') {
+            const boolOp = pf.operator;
+            const noValueOp = boolOp === 'isEmpty' || boolOp === 'isNotEmpty';
+            return (index.h("div", { class: "mrd-table__filter-radio-group" }, [
+                { labelKey: 'filter_all', value: null },
+                { labelKey: 'yes', value: true },
+                { labelKey: 'no', value: false },
+            ].map(opt => (index.h("label", { class: "mrd-table__filter-radio-label" }, index.h("input", { type: "radio", name: `bf-${this.openFilterCol}`, checked: !noValueOp && pf.value === opt.value, onChange: () => { this.pendingFilter = Object.assign(Object.assign({}, pf), { operator: undefined, value: opt.value }); } }), t(opt.labelKey, this.locale)))), index.h("label", { class: "mrd-table__filter-radio-label" }, index.h("input", { type: "radio", name: `bf-${this.openFilterCol}`, checked: boolOp === 'isEmpty', onChange: () => { this.pendingFilter = Object.assign(Object.assign({}, pf), { operator: 'isEmpty', value: undefined }); } }), t('filter_is_empty', this.locale)), index.h("label", { class: "mrd-table__filter-radio-label" }, index.h("input", { type: "radio", name: `bf-${this.openFilterCol}`, checked: boolOp === 'isNotEmpty', onChange: () => { this.pendingFilter = Object.assign(Object.assign({}, pf), { operator: 'isNotEmpty', value: undefined }); } }), t('filter_is_not_empty', this.locale))));
+        }
+        if (dataType === 'LIST') {
+            const items = (_c = (_b = col.field) === null || _b === void 0 ? void 0 : _b.listItems) !== null && _c !== void 0 ? _c : [];
+            const selected = (_d = pf.values) !== null && _d !== void 0 ? _d : [];
+            return (index.h("div", { class: "mrd-table__filter-list" }, index.h("div", { class: "mrd-table__filter-list-controls" }, index.h("button", { class: "mrd-table__filter-list-btn", onClick: () => { this.pendingFilter = Object.assign(Object.assign({}, pf), { values: items.map(i => i.key) }); } }, t('filter_select_all', this.locale)), index.h("button", { class: "mrd-table__filter-list-btn", onClick: () => { this.pendingFilter = Object.assign(Object.assign({}, pf), { values: [] }); } }, t('filter_select_none', this.locale))), items.map(item => (index.h("label", { class: "mrd-table__filter-checkbox-label" }, index.h("input", { type: "checkbox", checked: selected.includes(item.key), onChange: (e) => this.togglePendingValue(item.key, e.target.checked) }), item.label)))));
+        }
+        if (TEXT_TYPES.has(dataType) || dataType === 'RELATION') {
+            const op = (_e = pf.operator) !== null && _e !== void 0 ? _e : 'startsWith';
+            const noInput = op === 'isEmpty' || op === 'isNotEmpty';
+            return (index.h("div", { class: "mrd-table__filter-editor" }, index.h("select", { class: "mrd-table__filter-select", onChange: (e) => this.setPending('operator', e.target.value) }, [
+                { val: 'startsWith', labelKey: 'filter_starts_with' },
+                { val: 'equals', labelKey: 'filter_equals' },
+                { val: 'isEmpty', labelKey: 'filter_is_empty' },
+                { val: 'isNotEmpty', labelKey: 'filter_is_not_empty' },
+            ].map(o => index.h("option", { value: o.val, selected: op === o.val }, t(o.labelKey, this.locale)))), !noInput && (index.h("input", { type: "text", class: "mrd-table__filter-input", value: String((_f = pf.value) !== null && _f !== void 0 ? _f : ''), placeholder: t('filter_search_value', this.locale), onInput: (e) => this.setPending('value', e.target.value) }))));
+        }
+        if (NUMERIC_TYPES.has(dataType)) {
+            const numOp = pf.operator;
+            const noInput = numOp === 'isEmpty' || numOp === 'isNotEmpty';
+            const rangeMode = !noInput && (pf.from !== undefined || pf.to !== undefined);
+            return (index.h("div", { class: "mrd-table__filter-editor" }, index.h("select", { class: "mrd-table__filter-select", onChange: (e) => {
+                    const val = e.target.value;
+                    if (val === 'isEmpty' || val === 'isNotEmpty') {
+                        this.pendingFilter = Object.assign(Object.assign({}, pf), { operator: val, value: undefined, from: undefined, to: undefined });
+                    }
+                    else {
+                        this.pendingFilter = Object.assign(Object.assign({}, pf), { operator: undefined });
+                    }
+                } }, index.h("option", { value: "", selected: !noInput }, t('filter_has_value', this.locale)), index.h("option", { value: "isEmpty", selected: numOp === 'isEmpty' }, t('filter_is_empty', this.locale)), index.h("option", { value: "isNotEmpty", selected: numOp === 'isNotEmpty' }, t('filter_is_not_empty', this.locale))), !noInput && (index.h("div", { class: "mrd-table__filter-editor" }, index.h("div", { class: "mrd-table__filter-radio-group mrd-table__filter-radio-group--inline" }, index.h("label", { class: "mrd-table__filter-radio-label" }, index.h("input", { type: "radio", name: `nm-${this.openFilterCol}`, checked: !rangeMode, onChange: () => { this.pendingFilter = Object.assign(Object.assign({}, pf), { from: undefined, to: undefined }); } }), t('filter_exact', this.locale)), index.h("label", { class: "mrd-table__filter-radio-label" }, index.h("input", { type: "radio", name: `nm-${this.openFilterCol}`, checked: rangeMode, onChange: () => { this.pendingFilter = Object.assign(Object.assign({}, pf), { value: undefined, from: null, to: null }); } }), t('filter_range', this.locale))), !rangeMode ? (index.h("input", { type: "number", class: "mrd-table__filter-input", value: pf.value != null ? String(pf.value) : '', onInput: (e) => this.setPending('value', e.target.value) })) : (index.h("div", { class: "mrd-table__filter-range" }, index.h("input", { type: "number", class: "mrd-table__filter-input", placeholder: t('filter_from', this.locale), value: pf.from != null ? String(pf.from) : '', onInput: (e) => this.setPending('from', e.target.value) }), index.h("span", { class: "mrd-table__filter-range-sep" }, "\u2013"), index.h("input", { type: "number", class: "mrd-table__filter-input", placeholder: t('filter_to', this.locale), value: pf.to != null ? String(pf.to) : '', onInput: (e) => this.setPending('to', e.target.value) })))))));
+        }
+        if (dataType === 'DATETIME') {
+            const dtOp = pf.operator;
+            const noInput = dtOp === 'isEmpty' || dtOp === 'isNotEmpty';
+            const rangeMode = !noInput && (pf.from !== undefined || pf.to !== undefined);
+            return (index.h("div", { class: "mrd-table__filter-editor" }, index.h("select", { class: "mrd-table__filter-select", onChange: (e) => {
+                    const val = e.target.value;
+                    if (val === 'isEmpty' || val === 'isNotEmpty') {
+                        this.pendingFilter = Object.assign(Object.assign({}, pf), { operator: val, value: undefined, from: undefined, to: undefined });
+                    }
+                    else {
+                        this.pendingFilter = Object.assign(Object.assign({}, pf), { operator: undefined });
+                    }
+                } }, index.h("option", { value: "", selected: !noInput }, t('filter_has_value', this.locale)), index.h("option", { value: "isEmpty", selected: dtOp === 'isEmpty' }, t('filter_is_empty', this.locale)), index.h("option", { value: "isNotEmpty", selected: dtOp === 'isNotEmpty' }, t('filter_is_not_empty', this.locale))), !noInput && (index.h("div", { class: "mrd-table__filter-editor" }, index.h("div", { class: "mrd-table__filter-radio-group mrd-table__filter-radio-group--inline" }, index.h("label", { class: "mrd-table__filter-radio-label" }, index.h("input", { type: "radio", name: `dt-${this.openFilterCol}`, checked: !rangeMode, onChange: () => { this.pendingFilter = Object.assign(Object.assign({}, pf), { from: undefined, to: undefined }); } }), t('filter_exact', this.locale)), index.h("label", { class: "mrd-table__filter-radio-label" }, index.h("input", { type: "radio", name: `dt-${this.openFilterCol}`, checked: rangeMode, onChange: () => { this.pendingFilter = Object.assign(Object.assign({}, pf), { value: undefined, from: null, to: null }); } }), t('filter_range', this.locale))), !rangeMode ? (index.h("input", { type: "date", class: "mrd-table__filter-input", value: String((_g = pf.value) !== null && _g !== void 0 ? _g : ''), onInput: (e) => this.setPending('value', e.target.value) })) : (index.h("div", { class: "mrd-table__filter-range mrd-table__filter-range--stacked" }, index.h("label", { class: "mrd-table__filter-range-label" }, t('filter_from', this.locale)), index.h("input", { type: "date", class: "mrd-table__filter-input", value: pf.from != null ? String(pf.from) : '', onInput: (e) => this.setPending('from', e.target.value) }), index.h("label", { class: "mrd-table__filter-range-label" }, t('filter_to', this.locale)), index.h("input", { type: "date", class: "mrd-table__filter-input", value: pf.to != null ? String(pf.to) : '', onInput: (e) => this.setPending('to', e.target.value) })))))));
+        }
+        if (DATE_TYPES.has(dataType)) {
+            const inputType = dataType === 'DATE' ? 'date' : 'time';
+            const dtdOp = pf.operator;
+            const noInput = dtdOp === 'isEmpty' || dtdOp === 'isNotEmpty';
+            const rangeMode = !noInput && (pf.from !== undefined || pf.to !== undefined);
+            return (index.h("div", { class: "mrd-table__filter-editor" }, index.h("select", { class: "mrd-table__filter-select", onChange: (e) => {
+                    const val = e.target.value;
+                    if (val === 'isEmpty' || val === 'isNotEmpty') {
+                        this.pendingFilter = Object.assign(Object.assign({}, pf), { operator: val, value: undefined, from: undefined, to: undefined });
+                    }
+                    else {
+                        this.pendingFilter = Object.assign(Object.assign({}, pf), { operator: undefined });
+                    }
+                } }, index.h("option", { value: "", selected: !noInput }, t('filter_has_value', this.locale)), index.h("option", { value: "isEmpty", selected: dtdOp === 'isEmpty' }, t('filter_is_empty', this.locale)), index.h("option", { value: "isNotEmpty", selected: dtdOp === 'isNotEmpty' }, t('filter_is_not_empty', this.locale))), !noInput && (index.h("div", { class: "mrd-table__filter-editor" }, index.h("div", { class: "mrd-table__filter-radio-group mrd-table__filter-radio-group--inline" }, index.h("label", { class: "mrd-table__filter-radio-label" }, index.h("input", { type: "radio", name: `dt-${this.openFilterCol}`, checked: !rangeMode, onChange: () => { this.pendingFilter = Object.assign(Object.assign({}, pf), { from: undefined, to: undefined }); } }), t('filter_exact', this.locale)), index.h("label", { class: "mrd-table__filter-radio-label" }, index.h("input", { type: "radio", name: `dt-${this.openFilterCol}`, checked: rangeMode, onChange: () => { this.pendingFilter = Object.assign(Object.assign({}, pf), { value: undefined, from: null, to: null }); } }), t('filter_range', this.locale))), !rangeMode ? (index.h("input", { type: inputType, class: "mrd-table__filter-input", value: String((_h = pf.value) !== null && _h !== void 0 ? _h : ''), onInput: (e) => this.setPending('value', e.target.value) })) : (index.h("div", { class: "mrd-table__filter-range" }, index.h("input", { type: inputType, class: "mrd-table__filter-input", placeholder: t('filter_from', this.locale), value: pf.from != null ? String(pf.from) : '', onInput: (e) => this.setPending('from', e.target.value) }), index.h("input", { type: inputType, class: "mrd-table__filter-input", placeholder: t('filter_to', this.locale), value: pf.to != null ? String(pf.to) : '', onInput: (e) => this.setPending('to', e.target.value) })))))));
+        }
+        return null;
+    }
+    renderFilterPopup() {
+        var _a, _b, _c, _d;
+        if (!this.openFilterCol || !this.pendingFilter)
+            return null;
+        const col = this.columns.find(c => this.colName(c) === this.openFilterCol);
+        if (!col)
+            return null;
+        const label = (_d = (_b = (_a = col.field) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : (_c = col.relation) === null || _c === void 0 ? void 0 : _c.label) !== null && _d !== void 0 ? _d : this.openFilterCol;
+        const sortActive = this.sortField === this.openFilterCol;
+        return (index.h("div", { class: "mrd-table__filter-popup", style: { top: `${this.popupPos.top}px`, left: `${this.popupPos.left}px` }, onClick: (e) => e.stopPropagation() }, index.h("div", { class: "mrd-table__filter-popup-header" }, index.h("span", { class: "mrd-table__filter-popup-title" }, label), index.h("button", { class: "mrd-table__filter-close", onClick: () => this.closeFilterPopup() }, "\u2715")), index.h("div", { class: "mrd-table__filter-section" }, index.h("div", { class: "mrd-table__filter-section-label" }, t('filter_sorting', this.locale)), index.h("div", { class: "mrd-table__filter-sort-buttons" }, index.h("button", { class: `mrd-table__filter-sort-btn${sortActive && this.sortDir === 'asc' ? ' mrd-table__filter-sort-btn--active' : ''}`, onClick: () => this.applySort(col, 'asc') }, "\u25B2 ", t('filter_ascending', this.locale)), index.h("button", { class: `mrd-table__filter-sort-btn${sortActive && this.sortDir === 'desc' ? ' mrd-table__filter-sort-btn--active' : ''}`, onClick: () => this.applySort(col, 'desc') }, "\u25BC ", t('filter_descending', this.locale)))), index.h("div", { class: "mrd-table__filter-divider" }), index.h("div", { class: "mrd-table__filter-section" }, index.h("div", { class: "mrd-table__filter-section-label" }, t('filter_section', this.locale)), this.renderFilterEditor(col)), index.h("div", { class: "mrd-table__filter-popup-footer" }, index.h("button", { class: "mrd-table__filter-btn mrd-table__filter-btn--clear", onClick: () => this.clearFilter() }, t('filter_clear', this.locale)), index.h("button", { class: "mrd-table__filter-btn mrd-table__filter-btn--apply", onClick: () => this.applyFilter() }, t('filter_apply', this.locale)))));
+    }
+    // ── Render: footer ────────────────────────────────────────────────────────
+    renderFooter(rowCount, effectiveTotal) {
+        const total = this.totalElements;
+        // Non-paginated mode: show plain row count
+        if (total === 0) {
+            const count = rowCount !== null && rowCount !== void 0 ? rowCount : 0;
+            if (count === 0)
+                return null;
+            return (index.h("div", { class: "mrd-table__footer" }, count, " ", t('table_of', this.locale), " ", count));
+        }
+        // Paginated mode: only show once page 0 has loaded (avoids stale total during filter reset)
+        if (!this.loadedPages.has(0))
+            return null;
+        // Use effectiveTotal (derived from actual page lengths) so the counter
+        // is correct even when the host has not yet updated totalElements.
+        const displayTotal = effectiveTotal !== null && effectiveTotal !== void 0 ? effectiveTotal : total;
+        // Compute from/to independently so partial rows at top/bottom are included.
+        const from = Math.min(Math.floor(this.scrollTop / this.rowHeight) + 1, displayTotal);
+        const to = Math.min(Math.ceil((this.scrollTop + this.tableHeight) / this.rowHeight), displayTotal);
+        return (index.h("div", { class: "mrd-table__footer" }, from, "\u2013", to, " ", t('table_of', this.locale), " ", displayTotal));
+    }
+    // ── Render: cell ──────────────────────────────────────────────────────────
+    renderCell(col, row) {
+        var _a, _b, _c, _d, _e, _f;
+        const numericTypes = new Set(['INTEGER', 'DECIMAL', 'PERCENTAGE', 'CURRENCY']);
+        const dataType = (_b = (_a = col.field) === null || _a === void 0 ? void 0 : _a.dataType) !== null && _b !== void 0 ? _b : '';
+        const isNumeric = col.type === 'FIELD' && numericTypes.has(dataType);
+        const isFile = col.type === 'FIELD' && (dataType === 'FILE' || dataType === 'IMAGE');
+        if (isFile) {
+            const name = (_d = (_c = col.field) === null || _c === void 0 ? void 0 : _c.name) !== null && _d !== void 0 ? _d : '';
+            const fileVal = row === null || row === void 0 ? void 0 : row[name];
+            const href = fileVal === null || fileVal === void 0 ? void 0 : fileVal.href;
+            const fileName = fileVal === null || fileVal === void 0 ? void 0 : fileVal.fileName;
+            return (index.h("td", { class: "mrd-table__cell" }, href && fileName ? (index.h("button", { class: "mrd-table__file-btn", title: fileName, onClick: (e) => {
+                    e.stopPropagation();
+                    this.mrdDownload.emit({ href, fileName });
+                } }, index.h("svg", { class: "mrd-table__file-icon", viewBox: "0 0 24 24", "aria-hidden": "true" }, index.h("path", { fill: "currentColor", d: "M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm-1 7V3.5L18.5 9H13zm-3 8l-3-3 1.41-1.41L10 14.17l4.59-4.58L16 11l-6 6z" })), t('download', this.locale))) : ''));
+        }
+        if (dataType === 'JSON') {
+            const name = (_f = (_e = col.field) === null || _e === void 0 ? void 0 : _e.name) !== null && _f !== void 0 ? _f : '';
+            const rawValue = name ? row === null || row === void 0 ? void 0 : row[name] : undefined;
+            if (rawValue == null || rawValue === '')
+                return index.h("td", { class: "mrd-table__cell" });
+            const compactHtml = CellRenderer.formatJson(rawValue, true);
+            const prettyHtml = CellRenderer.formatJson(rawValue, false);
+            return (index.h("td", { class: "mrd-table__cell" }, index.h("span", { class: "mrd-table__json-preview", innerHTML: compactHtml }), index.h("button", { class: "mrd-table__textblock-btn", onClick: (e) => { e.stopPropagation(); this.openJsonModal(prettyHtml); }, "aria-label": t('textblock_show_more', this.locale) }, "\u22EF")));
+        }
+        const TEXTBLOCK_MAX = 200;
+        if (dataType === 'TEXTBLOCK') {
+            const full = CellRenderer.render(col, row, this.locale);
+            if (full.length <= TEXTBLOCK_MAX) {
+                return index.h("td", { class: "mrd-table__cell" }, full);
+            }
+            const preview = full.slice(0, TEXTBLOCK_MAX) + '…';
+            return (index.h("td", { class: "mrd-table__cell" }, preview, index.h("button", { class: "mrd-table__textblock-btn", onClick: (e) => { e.stopPropagation(); this.openTextblockModal(full); }, "aria-label": t('textblock_show_more', this.locale) }, "\u22EF")));
+        }
+        const value = CellRenderer.render(col, row, this.locale);
+        return (index.h("td", { class: `mrd-table__cell${isNumeric ? ' mrd-table__cell--numeric' : ''}` }, value));
+    }
+    // ── Render: totals row ────────────────────────────────────────────────────
+    renderTotalsRow() {
+        if (!this.aggregations)
+            return null;
+        if (!this.columns.some(c => { var _a; return c.type === 'FIELD' && ((_a = c.field) === null || _a === void 0 ? void 0 : _a.aggregate); }))
+            return null;
+        return (index.h("tfoot", null, index.h("tr", { class: "mrd-table__totals-row" }, this.columns.map(col => {
+            var _a, _b;
+            const val = this.renderAggregationValue(col);
+            const isNumeric = col.type === 'FIELD' && NUMERIC_TYPES.has((_b = (_a = col.field) === null || _a === void 0 ? void 0 : _a.dataType) !== null && _b !== void 0 ? _b : '');
+            return (index.h("td", { class: `mrd-table__totals-cell${isNumeric ? ' mrd-table__totals-cell--numeric' : ''}` }, val));
+        }))));
+    }
+    // ── Render ─────────────────────────────────────────────────────────────────
+    render() {
+        var _a, _b, _c;
+        if (!((_a = this.columns) === null || _a === void 0 ? void 0 : _a.length))
+            return null;
+        // ── Non-paginated mode ──────────────────────────────────────────────────
+        if (this.totalElements === 0) {
+            return (index.h(index.Host, null, this.renderToolbar(), index.h("div", { class: "mrd-table" }, index.h("table", { class: "mrd-table__table" }, index.h("thead", null, index.h("tr", null, this.columns.map(col => {
+                var _a, _b, _c, _d;
+                const name = this.colName(col);
+                const isFiltered = this.activeFilters.has(name);
+                const cls = [
+                    'mrd-table__header',
+                    isFiltered ? 'mrd-table__header--filtered' : '',
+                    this.filterMode ? 'mrd-table__header--sortable' : '',
+                ].filter(Boolean).join(' ');
+                return (index.h("th", { class: cls, onClick: this.filterMode ? (e) => this.handleFilterOpen(col, e) : undefined }, index.h("span", { class: "mrd-table__header-label" }, (_d = (_b = (_a = col.field) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : (_c = col.relation) === null || _c === void 0 ? void 0 : _c.label) !== null && _d !== void 0 ? _d : ''), isFiltered && this.renderFilterIcon()));
+            }))), index.h("tbody", null, (_b = this.rows) === null || _b === void 0 ? void 0 : _b.map((row, i) => (index.h("tr", { class: "mrd-table__row mrd-table__row--clickable", style: { background: i % 2 === 0 ? '' : 'var(--mrd-color-neutral-100)' }, onClick: () => this.mrdRowClick.emit(row) }, this.columns.map(col => this.renderCell(col, row)))))), this.renderTotalsRow()), (!this.rows || this.rows.length === 0) && (index.h("p", { class: "mrd-table__empty" }, t('no_results', this.locale)))), this.renderFooter((_c = this.rows) === null || _c === void 0 ? void 0 : _c.length), this.renderFilterPopup(), this.renderTextblockModal(), this.renderJsonModal()));
+        }
+        // ── Paginated / virtual-scroll mode ────────────────────────────────────
+        // Derive the authoritative row count from loaded pages:
+        // if any loaded page is shorter than pageSize it is the last page,
+        // so the true total cannot exceed (pageNum * pageSize + pageRows.length).
+        // This self-corrects without requiring the host to update totalElements.
+        let effectiveTotal = this.totalElements;
+        for (const [pageNum, pageRows] of this.loadedPages) {
+            if (pageRows.length < this.pageSize) {
+                effectiveTotal = Math.min(effectiveTotal, pageNum * this.pageSize + pageRows.length);
+            }
+        }
+        // Clamp renderEnd to what we actually know exists (-1 when empty)
+        const clampedEnd = Math.min(this.renderEnd, effectiveTotal - 1);
+        const colCount = this.columns.length;
+        const topSpacerHeight = this.renderStart * this.rowHeight;
+        const bottomSpacerHeight = Math.max(0, (effectiveTotal - 1 - clampedEnd) * this.rowHeight);
+        const tableStyle = this.colWidths.length > 0
+            ? { tableLayout: 'fixed' }
+            : undefined;
+        const renderedRows = [];
+        for (let i = this.renderStart; i <= clampedEnd; i++) {
+            const row = this.getRow(i);
+            if (row === null) {
+                renderedRows.push(index.h("tr", { class: "mrd-table__row mrd-table__row--loading" }, index.h("td", { class: "mrd-table__cell--placeholder", colSpan: colCount }, index.h("span", { class: "mrd-table__placeholder-bar" }))));
+            }
+            else {
+                renderedRows.push(index.h("tr", { class: "mrd-table__row mrd-table__row--clickable", style: { background: i % 2 === 0 ? '' : 'var(--mrd-color-neutral-100)' }, onClick: () => this.mrdRowClick.emit(row) }, this.columns.map(col => this.renderCell(col, row))));
+            }
+        }
+        return (index.h(index.Host, null, this.renderToolbar(), index.h("div", { class: "mrd-table__scroll", style: { height: `${this.tableHeight}px` }, onScroll: this.handleScroll }, index.h("table", { class: "mrd-table__table", style: tableStyle }, index.h("thead", null, index.h("tr", null, this.columns.map((col, idx) => {
+            var _a, _b, _c, _d;
+            const name = this.colName(col);
+            const isActive = this.sortField === name;
+            const isFiltered = this.activeFilters.has(name);
+            const isInteractive = !NON_INTERACTIVE_TYPES.has(this.colDataType(col));
+            const cls = [
+                'mrd-table__header',
+                isInteractive ? 'mrd-table__header--sortable' : '',
+                isActive ? `mrd-table__header--sorted-${this.sortDir}` : '',
+                isFiltered ? 'mrd-table__header--filtered' : '',
+            ].filter(Boolean).join(' ');
+            return (index.h("th", { class: cls, style: this.colWidths[idx] ? { width: `${this.colWidths[idx]}px` } : undefined, onClick: isInteractive ? ((e) => this.filterMode ? this.handleFilterOpen(col, e) : this.handleSortClick(col)) : undefined }, index.h("span", { class: "mrd-table__header-label" }, (_d = (_b = (_a = col.field) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : (_c = col.relation) === null || _c === void 0 ? void 0 : _c.label) !== null && _d !== void 0 ? _d : ''), isInteractive && isActive && (index.h("span", { class: "mrd-table__sort-icon", "aria-hidden": "true" }, this.sortDir === 'asc' ? '▲' : '▼')), isInteractive && !isActive && !this.filterMode && (index.h("span", { class: "mrd-table__sort-icon", "aria-hidden": "true" }, "\u21C5")), isInteractive && isFiltered && this.renderFilterIcon()));
+        }))), index.h("tbody", null, topSpacerHeight > 0 && (index.h("tr", { class: "mrd-table__spacer", style: { height: `${topSpacerHeight}px` } }, index.h("td", { colSpan: colCount }))), renderedRows, bottomSpacerHeight > 0 && (index.h("tr", { class: "mrd-table__spacer", style: { height: `${bottomSpacerHeight}px` } }, index.h("td", { colSpan: colCount })))), this.renderTotalsRow())), effectiveTotal === 0 && this.loadedPages.has(0) && (index.h("p", { class: "mrd-table__empty" }, t('no_results', this.locale))), effectiveTotal > 0 && this.renderFooter(undefined, effectiveTotal), this.renderFilterPopup(), this.renderTextblockModal()));
+    }
+    renderFilterIcon() {
+        return (index.h("span", { class: "mrd-table__filter-icon", "aria-hidden": "true" }, index.h("svg", { viewBox: "0 0 24 24", width: "14", height: "14", fill: "currentColor" }, index.h("path", { d: "M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z" }))));
+    }
+    renderTextblockModal() {
+        if (this.textblockModal === null)
+            return null;
+        return (index.h("div", { class: "mrd-table__modal-backdrop", onClick: () => this.closeTextblockModal(), role: "dialog", "aria-modal": "true" }, index.h("div", { class: "mrd-table__modal", onClick: (e) => e.stopPropagation() }, index.h("button", { class: "mrd-table__modal-close", onClick: () => this.closeTextblockModal(), "aria-label": t('close', this.locale) }, "\u2715"), index.h("p", { class: "mrd-table__modal-text" }, this.textblockModal))));
+    }
+    renderJsonModal() {
+        if (this.jsonModal === null)
+            return null;
+        return (index.h("div", { class: "mrd-table__modal-backdrop", onClick: () => this.closeJsonModal(), role: "dialog", "aria-modal": "true" }, index.h("div", { class: "mrd-table__modal", onClick: (e) => e.stopPropagation() }, index.h("button", { class: "mrd-table__modal-close", onClick: () => this.closeJsonModal(), "aria-label": t('close', this.locale) }, "\u2715"), index.h("pre", { class: "mrd-table__modal-json", innerHTML: this.jsonModal }))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "totalElements": [{
+                "totalElementsChanged": 0
+            }]
+    }; }
+};
+MrdTable.style = mrdTableScss();
+
+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) {
+        index.registerInstance(this, hostRef);
+        this.mrdChange = index.createEvent(this, "mrdChange");
+        this.mrdBlur = index.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 (index.h(index.Host, { key: 'b1ea3dce848a4ad41b60599804c69a35ccd35570' }, index.h("div", { key: '2e327824843fe02c5851beae96d52f9eb9ee67ce', class: "mrd-text-field" }, this.label && (index.h("label", { key: '99026834b30a53d7cf715c59099895211ff6ddb7', class: `mrd-text-field__label${this.required ? ' mrd-text-field__label--required' : ''}` }, this.label)), index.h("input", { key: '0e56c9115b2016ad3cb3ce8e734297354c70c7e2', 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 && index.h("span", { key: '0430c32b083484747962147e167b11ed7a1597cc', 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) {
+        index.registerInstance(this, hostRef);
+        this.mrdChange = index.createEvent(this, "mrdChange");
+        this.mrdBlur = index.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 Promise.resolve().then(function () { return require('./quill-DmFfnC1f.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 (index.h(index.Host, { key: '7bc05fae8d48c43b56bde892537930552605727a' }, index.h("div", { key: '3416e9c5fdf6362602715de8427c5d2ccfa52925', class: "mrd-textarea-field" }, this.label && (index.h("label", { key: 'c6bd35076738b1a700b53092fb0754250c73e085', class: `mrd-textarea-field__label${this.required ? ' mrd-textarea-field__label--required' : ''}` }, this.label)), index.h("div", { key: 'ed0483a25a62399d1ac8ee14bc59e3eb44b91814', class: `mrd-textarea-field__container${this.error ? ' mrd-textarea-field__container--error' : ''}` }, index.h("div", { key: 'd17c6997602b81e8b7f66f1e5cfb12b4836cb892', class: "mrd-textarea-field__editor" })), this.error && index.h("span", { key: '30a068872e73ca78781c9a5e1fac2c9e3ce30765', class: "mrd-textarea-field__error" }, this.error))));
+    }
+    get el() { return index.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) {
+        index.registerInstance(this, hostRef);
+        this.mrdChange = index.createEvent(this, "mrdChange");
+        this.mrdBlur = index.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 (index.h(index.Host, { key: '6a6828d9c5224ddfcc5d17124523037512f4970c' }, index.h("div", { key: '468d5295170cefc93b1e2d49b7189c8366d306b7', class: "mrd-time-field" }, this.label && (index.h("label", { key: '52ea233ea0a7e8563145c326c4ef9d27557b6dc8', class: `mrd-time-field__label${this.required ? ' mrd-time-field__label--required' : ''}` }, this.label)), index.h("input", { key: 'e9f0f75517638bf4e4ead95bf69530b5c395f8bc', 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 && index.h("span", { key: '4f734c3373444df4f686a7ae6bde84a2ee39d9f4', class: "mrd-time-field__error" }, this.error))));
+    }
+};
+MrdTimeField.style = mrdTimeFieldScss();
+
+exports.mrd_boolean_field = MrdBooleanField;
+exports.mrd_currency_field = MrdCurrencyField;
+exports.mrd_date_field = MrdDateField;
+exports.mrd_datetime_field = MrdDatetimeField;
+exports.mrd_email_field = MrdEmailField;
+exports.mrd_field = MrdField;
+exports.mrd_file_field = MrdFileField;
+exports.mrd_form = MrdForm;
+exports.mrd_hyperlink_field = MrdHyperlinkField;
+exports.mrd_image_field = MrdImageField;
+exports.mrd_layout_section = MrdLayoutSection;
+exports.mrd_list_field = MrdListField;
+exports.mrd_longtext_field = MrdLongtextField;
+exports.mrd_number_field = MrdNumberField;
+exports.mrd_relation_field = MrdRelationField;
+exports.mrd_table = MrdTable;
+exports.mrd_text_field = MrdTextField;
+exports.mrd_textarea_field = MrdTextareaField;
+exports.mrd_time_field = MrdTimeField;