@mmlogic/components 0.3.4 → 0.3.5

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

@@ -22,6 +22,7 @@ export class MrdTable {
         this.outsideClickHandler = null;
         this.keydownHandler = null;
         this.createPickerClickHandler = null;
+        this.viewPopoverClickHandler = null;
         // ── Props ──────────────────────────────────────────────────────────────────
         /** The VIEW or RELATED_VIEW layout item. Contains view config, dataClass, fromClass, actions etc. */
         this.item = null;
@@ -60,6 +61,8 @@ export class MrdTable {
         this.popupPos = { top: 0, left: 0 };
         /** Whether the create-type picker dropdown is open. */
         this.createPickerOpen = false;
+        /** Whether the view-switcher popover (full list) is open. */
+        this.viewPopoverOpen = false;
         /** Current scroll offset of the scroll container — drives pagination footer. */
         this.scrollTop = 0;
         /** Full text shown in the TEXTBLOCK expand modal (null = closed). */
@@ -204,6 +207,10 @@ export class MrdTable {
             document.removeEventListener('keydown', this.keydownHandler);
             this.keydownHandler = null;
         }
+        if (this.viewPopoverClickHandler) {
+            document.removeEventListener('click', this.viewPopoverClickHandler);
+            this.viewPopoverClickHandler = null;
+        }
     }
     componentDidRender() {
         if (this.colWidths.length === 0 && this.loadedPages.size > 0 && this.totalElements > 0) {
@@ -797,18 +804,41 @@ export class MrdTable {
         this.activeFilters = new Map();
         this.init();
     }
+    toggleViewPopover(e) {
+        e.stopPropagation();
+        if (this.viewPopoverOpen) {
+            this.viewPopoverOpen = false;
+            if (this.viewPopoverClickHandler) {
+                document.removeEventListener('click', this.viewPopoverClickHandler);
+                this.viewPopoverClickHandler = null;
+            }
+            return;
+        }
+        this.viewPopoverOpen = true;
+        this.viewPopoverClickHandler = () => {
+            this.viewPopoverOpen = false;
+            document.removeEventListener('click', this.viewPopoverClickHandler);
+            this.viewPopoverClickHandler = null;
+        };
+        document.addEventListener('click', this.viewPopoverClickHandler);
+    }
     // ── Render: toolbar ────────────────────────────────────────────────────────
     renderToolbar() {
+        var _a;
         const filterCount = this.activeFilters.size;
         const actions = this.tableActions;
         const allViews = this.allViews;
         const hasActions = actions.length > 0;
         const hasViewSwitcher = allViews.length > 1;
-        return (h("div", { class: "mrd-table__toolbar" }, h("div", { class: "mrd-table__toolbar-left" }, h("button", { class: `mrd-table__action mrd-table__action--secondary mrd-table__filter-toggle${this.filterMode ? ' mrd-table__filter-toggle--active' : ''}`, onClick: () => this.handleFilterToggle() }, h("svg", { class: "mrd-table__action-icon", viewBox: "0 0 24 24", "aria-hidden": "true" }, h("path", { fill: "currentColor", d: "M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z" })), filterCount > 0 && h("span", { class: "mrd-table__filter-badge" }, filterCount), 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 && (h("button", { class: "mrd-table__action mrd-table__action--secondary", onClick: () => this.clearAllFilters() }, h("svg", { class: "mrd-table__action-icon", viewBox: "0 0 24 24", "aria-hidden": "true" }, 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" })), h("span", { class: "mrd-table__action-tooltip" }, t('table_filter_clear_all', this.locale))))), hasViewSwitcher && (h("div", { class: "mrd-table__toolbar-center" }, h("select", { class: "mrd-table__view-select", onChange: (e) => {
-                const idx = parseInt(e.target.value, 10);
-                if (!isNaN(idx) && idx !== this.activeViewIdx)
-                    this.handleViewSwitch(idx);
-            } }, allViews.map((v, i) => (h("option", { value: String(i), selected: i === this.activeViewIdx }, v.label)))))), hasActions && (h("div", { class: "mrd-table__toolbar-right" }, actions.map(a => {
+        return (h("div", { class: "mrd-table__toolbar" }, h("div", { class: "mrd-table__toolbar-left" }, h("button", { class: `mrd-table__action mrd-table__action--secondary mrd-table__filter-toggle${this.filterMode ? ' mrd-table__filter-toggle--active' : ''}`, onClick: () => this.handleFilterToggle() }, h("svg", { class: "mrd-table__action-icon", viewBox: "0 0 24 24", "aria-hidden": "true" }, h("path", { fill: "currentColor", d: "M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z" })), filterCount > 0 && h("span", { class: "mrd-table__filter-badge" }, filterCount), 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 && (h("button", { class: "mrd-table__action mrd-table__action--secondary", onClick: () => this.clearAllFilters() }, h("svg", { class: "mrd-table__action-icon", viewBox: "0 0 24 24", "aria-hidden": "true" }, 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" })), h("span", { class: "mrd-table__action-tooltip" }, t('table_filter_clear_all', this.locale))))), hasViewSwitcher && (h("div", { class: "mrd-table__toolbar-center" }, h("div", { class: "mrd-table__view-switcher" }, h("button", { class: "mrd-table__view-arrow", "aria-label": "Previous view", onClick: () => this.handleViewSwitch((this.activeViewIdx - 1 + allViews.length) % allViews.length) }, "\u25C0"), h("div", { class: "mrd-table__view-title-wrap" }, h("button", { class: "mrd-table__view-title", onClick: (e) => this.toggleViewPopover(e) }, (_a = allViews[this.activeViewIdx]) === null || _a === void 0 ? void 0 : _a.label), this.viewPopoverOpen && (h("div", { class: "mrd-table__view-popover", onClick: (e) => e.stopPropagation() }, allViews.map((v, i) => (h("button", { key: String(i), class: `mrd-table__view-popover-item${i === this.activeViewIdx ? ' mrd-table__view-popover-item--active' : ''}`, onClick: () => {
+                if (i !== this.activeViewIdx)
+                    this.handleViewSwitch(i);
+                this.viewPopoverOpen = false;
+                if (this.viewPopoverClickHandler) {
+                    document.removeEventListener('click', this.viewPopoverClickHandler);
+                    this.viewPopoverClickHandler = null;
+                }
+            } }, v.label)))))), h("button", { class: "mrd-table__view-arrow", "aria-label": "Next view", onClick: () => this.handleViewSwitch((this.activeViewIdx + 1) % allViews.length) }, "\u25B6")))), hasActions && (h("div", { class: "mrd-table__toolbar-right" }, actions.map(a => {
             var _a, _b, _c;
             const createTypes = a.action === 'create' ? (_a = this.item) === null || _a === void 0 ? void 0 : _a.createTypes : null;
             if (createTypes === null || createTypes === void 0 ? void 0 : createTypes.length) {
@@ -1262,6 +1292,7 @@ export class MrdTable {
             "pendingFilter": {},
             "popupPos": {},
             "createPickerOpen": {},
+            "viewPopoverOpen": {},
             "scrollTop": {},
             "textblockModal": {},
             "jsonModal": {},

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

@@ -183,9 +183,32 @@
   gap: var(--mrd-space-1);
 }
 
-/* ── View title ──────────────────────────────────────────────────────────── */
 /* ── View switcher ───────────────────────────────────────────────────────── */
-.mrd-table__view-select {
+.mrd-table__view-switcher {
+  display: flex;
+  align-items: center;
+  gap: var(--mrd-space-1);
+}
+
+.mrd-table__view-arrow {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0 var(--mrd-space-1);
+  color: var(--mrd-color-neutral-500);
+  font-size: var(--mrd-font-size-xs);
+  line-height: 1;
+}
+
+.mrd-table__view-arrow:hover {
+  color: var(--mrd-color-neutral-800);
+}
+
+.mrd-table__view-title-wrap {
+  position: relative;
+}
+
+.mrd-table__view-title {
   font-size: var(--mrd-font-size-sm);
   font-weight: 600;
   color: var(--mrd-color-neutral-800);
@@ -194,8 +217,52 @@
   border: none;
   outline: none;
   cursor: pointer;
-  padding: 0;
+  padding: 0 var(--mrd-space-1);
   max-width: 220px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.mrd-table__view-title:hover {
+  color: var(--mrd-color-primary);
+}
+
+.mrd-table__view-popover {
+  position: absolute;
+  top: calc(100% + var(--mrd-space-1));
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--mrd-color-white);
+  border: 1px solid var(--mrd-color-neutral-200);
+  border-radius: var(--mrd-radius-md);
+  box-shadow: var(--mrd-shadow-md);
+  z-index: 100;
+  min-width: 160px;
+  padding: var(--mrd-space-1) 0;
+}
+
+.mrd-table__view-popover-item {
+  display: block;
+  width: 100%;
+  text-align: left;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: var(--mrd-space-2) var(--mrd-space-3);
+  font-size: var(--mrd-font-size-sm);
+  font-family: var(--mrd-font-family);
+  color: var(--mrd-color-neutral-700);
+  white-space: nowrap;
+}
+
+.mrd-table__view-popover-item:hover {
+  background: var(--mrd-color-neutral-50);
+}
+
+.mrd-table__view-popover-item--active {
+  font-weight: 600;
+  color: var(--mrd-color-primary);
 }
 
 .mrd-table__action {

package/dist/collection/components/mrd-textarea-field/mrd-textarea-field.scss

@@ -72,6 +72,62 @@
   font-style: normal;
 }
 
+/* Prose styling for read-only Quill output (Snow theme does not penetrate scoped CSS) */
+.mrd-textarea-field__editor .ql-editor p {
+  margin-bottom: 0.75em;
+}
+
+.mrd-textarea-field__editor .ql-editor p:last-child {
+  margin-bottom: 0;
+}
+
+.mrd-textarea-field__editor .ql-editor ul {
+  list-style: disc;
+  padding-left: 1.5em;
+  margin-bottom: 0.75em;
+}
+
+.mrd-textarea-field__editor .ql-editor ol {
+  list-style: decimal;
+  padding-left: 1.5em;
+  margin-bottom: 0.75em;
+}
+
+.mrd-textarea-field__editor .ql-editor li {
+  margin-bottom: 0.25em;
+}
+
+.mrd-textarea-field__editor .ql-editor h1 {
+  font-size: 1.75em;
+  font-weight: 700;
+  margin-bottom: 0.5em;
+}
+
+.mrd-textarea-field__editor .ql-editor h2 {
+  font-size: 1.375em;
+  font-weight: 700;
+  margin-bottom: 0.5em;
+}
+
+.mrd-textarea-field__editor .ql-editor h3 {
+  font-size: 1.125em;
+  font-weight: 600;
+  margin-bottom: 0.5em;
+}
+
+.mrd-textarea-field__editor .ql-editor a {
+  color: var(--mrd-color-primary);
+  text-decoration: underline;
+}
+
+.mrd-textarea-field__editor .ql-editor strong {
+  font-weight: 700;
+}
+
+.mrd-textarea-field__editor .ql-editor em {
+  font-style: italic;
+}
+
 .mrd-textarea-field__error {
   font-family: var(--mrd-font-family);
   font-size: var(--mrd-error-font-size);

package/dist/collection/dev/api.js

@@ -106,6 +106,15 @@ async function apiUploadFile(token, tenantCode, file) {
   return uris[0];
 }
 
+async function apiFetchMe(token, tenantCode) {
+  const { ok, body } = await apiRequest('GET', `/accounts/${tenantCode}/me`, token);
+  if (!ok) return null;
+  const href  = body?.links?.person?.href;
+  const label = body?.links?.person?.name ?? body?.email ?? '';
+  if (!href || !label) return null;
+  return { id: href, label };
+}
+
 async function apiSearchRelation(token, tenantCode, mostSignificantClass, query) {
   const q = encodeURIComponent(query);
   const { ok, status, body } = await apiRequest('GET', `/data/${tenantCode}/${mostSignificantClass}?q=${q}`, token);

package/dist/collection/dev/app.js

@@ -13,6 +13,7 @@ let _activeLayoutIndex = 0;
 let _dashboardType     = 'class'; // 'class' | 'general' | 'navigation' | 'object' | 'form'
 let _sectionGeneration = 0;       // incremented on each renderSection(); prevents stale fetches
 let _navHistory        = [];      // stack van { dashboardData, dashboardRecord, activeLayoutIndex }
+let _meUser            = null;    // { id: href, label: name } — resolved once after login via /accounts/me
 
 /* =====================================================================
    UTILITIES
@@ -231,6 +232,7 @@ function onCompactTenantChange(code) {
   _baseHref = `/data/${code}`;
   localStorage.setItem('last_tenant', code);
   if (_dashboardType === 'class' && code) loadCompactTypes(code);
+  if (code) apiFetchMe(authGetToken(), code).then(me => { _meUser = me; }).catch(() => {});
 }
 
 async function loadCompactTypes(tenantCode) {
@@ -262,9 +264,11 @@ async function loadCompactTypes(tenantCode) {
 
 function onDashboardTypeChange(type) {
   _dashboardType = type;
-  document.getElementById('controls-class-group').classList.toggle('hidden', type !== 'class');
-  document.getElementById('controls-object-group').classList.toggle('hidden', type !== 'object' && type !== 'form');
-  if (type === 'class' && _selectedTenant) loadCompactTypes(_selectedTenant);
+  const needsClass  = type === 'class' || type === 'create';
+  const needsObject = type === 'object' || type === 'form';
+  document.getElementById('controls-class-group').classList.toggle('hidden', !needsClass);
+  document.getElementById('controls-object-group').classList.toggle('hidden', !needsObject);
+  if (needsClass && _selectedTenant) loadCompactTypes(_selectedTenant);
 }
 
 /* =====================================================================
@@ -284,7 +288,16 @@ async function loadDashboard() {
     let dashboard;
     let recordData = null;
 
-    if (_dashboardType === 'class') {
+    if (_dashboardType === 'create') {
+      const pluralName = document.getElementById('type-select-compact').value;
+      if (!pluralName) throw new Error('Selecteer een type');
+      const opt = document.getElementById('type-select-compact').selectedOptions[0];
+      _selectedType = { name: opt.text, pluralName };
+      localStorage.setItem('last_type', pluralName);
+      await openCreateForm(pluralName, false);
+      return;
+
+    } else if (_dashboardType === 'class') {
       const pluralName = document.getElementById('type-select-compact').value;
       if (!pluralName) throw new Error('Selecteer een type');
       const opt = document.getElementById('type-select-compact').selectedOptions[0];
@@ -397,6 +410,10 @@ async function renderSection(index) {
 
   section.addEventListener('mrdViewAction', async (e) => {
     logEvent('mrdViewAction', e.detail);
+    const { action, dataClass } = e.detail;
+    if (action === 'create' && dataClass) {
+      await openCreateForm(dataClass, true);
+    }
   });
 
   section.addEventListener('mrdNavigate', async (e) => {
@@ -425,10 +442,11 @@ function updateBackButton() {
 function syncDashboardTypeUI(type, objectHref) {
   _dashboardType = type;
   document.getElementById('dashboard-type-select').value = type;
-  const isObject = type === 'object' || type === 'form';
-  document.getElementById('controls-class-group').classList.toggle('hidden', type !== 'class');
-  document.getElementById('controls-object-group').classList.toggle('hidden', !isObject);
-  if (isObject && objectHref) {
+  const needsClass  = type === 'class' || type === 'create';
+  const needsObject = type === 'object' || type === 'form';
+  document.getElementById('controls-class-group').classList.toggle('hidden', !needsClass);
+  document.getElementById('controls-object-group').classList.toggle('hidden', !needsObject);
+  if (needsObject && objectHref) {
     document.getElementById('object-href-input').value = objectHref;
   }
 }
@@ -563,19 +581,35 @@ async function loadRecord(row) {
 }
 
 async function loadForm() {
-  const pluralName = _selectedType?.pluralName;
-  if (!pluralName) return;
+  const pluralName = _selectedType?.pluralName
+    || document.getElementById('type-select-compact').value;
+  await openCreateForm(pluralName);
+}
 
-  const formPanel = document.getElementById('panel-form');
-  formPanel.classList.remove('hidden');
-  formPanel.innerHTML = '<span class="spinner"></span> Formulier laden...';
+async function openCreateForm(pluralName, pushNav = false) {
+  if (!pluralName || !_selectedTenant) return;
+
+  if (pushNav) pushHistory();
+
+  syncDashboardTypeUI('create', '');
+  const sel = document.getElementById('type-select-compact');
+  if (sel.querySelector(`option[value="${pluralName}"]`)) sel.value = pluralName;
+
+  document.getElementById('sections-tab-bar').innerHTML = '';
+  document.getElementById('panel-form').classList.add('hidden');
+  document.getElementById('panel-form').innerHTML = '';
   document.getElementById('panel-response').innerHTML = '';
+  document.getElementById('panel-sections').classList.remove('hidden');
+  updateBackButton();
+
+  const container = document.getElementById('sections-container');
+  container.innerHTML = '<span class="spinner"></span> Formulier laden...';
 
   try {
     const layout = await apiFetchForm(authGetToken(), _selectedTenant, pluralName);
-    await renderForm(layout);
+    await renderForm(layout, null, null, container);
   } catch (err) {
-    formPanel.innerHTML = `<span style="color:var(--mrd-color-danger)">❌ ${escHtml(err.message)}</span>`;
+    container.innerHTML = `<span style="color:var(--mrd-color-danger)">❌ ${escHtml(err.message)}</span>`;
   }
 }
 
@@ -608,25 +642,12 @@ async function renderForm(layout, record = null, selfHref = null, containerEl =
   }
   collectRelations(layout.items);
 
-  // Build initial form values from the fetched record (edit mode)
   const relationFieldNames = new Set(Object.values(_relationMeta).map(m => m.name));
-  let initialValues = {};
-  if (record) {
-    for (const [key, val] of Object.entries(record)) {
-      if (key === '_links' || key === '_embedded') continue;
-      initialValues[key] = val;
-    }
-    // Relation fields: convert _links entries to { id, label } for mrd-relation-field pre-fill
-    for (const relName of relationFieldNames) {
-      const link = record._links?.[relName];
-      if (!link) continue;
-      if (Array.isArray(link)) {
-        initialValues[relName] = link.map(l => ({ id: l.href, label: l.name ?? '' }));
-      } else if (link.href) {
-        initialValues[relName] = { id: link.href, label: link.name ?? '' };
-      }
-    }
-  }
+
+  // Build initial form values from the fetched record (edit mode).
+  // Flat fields and _links are merged: the component normalises raw API link formats.
+  const { _links, _embedded, ...fields } = record ?? {};
+  const initialValues = record ? { ...fields, ...(_links ?? {}) } : {};
 
   const formPanel = containerEl ?? document.getElementById('panel-form');
   formPanel.innerHTML = `<mrd-form id="live-form" locale="${escHtml(_locale)}"></mrd-form>`;
@@ -641,7 +662,8 @@ async function renderForm(layout, record = null, selfHref = null, containerEl =
   }
 
   form.layout = layout;
-  if (record) form.values = initialValues;
+  if (_meUser) form.me = _meUser;
+  form.values = record ? initialValues : {};
 
   // Upload files immediately on selection; write binary URI back via setFieldValue
     form.addEventListener('mrdChange', async (e) => {

package/dist/components/mrd-form.js

@@ -1 +1 @@
-import{proxyCustomElement as r,HTMLElement as e,createEvent as t,h as i,Host as o,transformTag as s}from"@stencil/core/internal/client";import{a as d,d as m}from"./client-layout.js";import{t as l}from"./i18n.js";import{v as a}from"./validation.js";import{d as n}from"./mrd-boolean-field2.js";import{d as c}from"./mrd-currency-field2.js";import{d as f}from"./mrd-date-field2.js";import{d as u}from"./mrd-datetime-field2.js";import{d as h}from"./mrd-email-field2.js";import{d as v}from"./mrd-field2.js";import{d as p}from"./mrd-file-field2.js";import{d as b}from"./mrd-hyperlink-field2.js";import{d as g}from"./mrd-image-field2.js";import{d as _}from"./mrd-list-field2.js";import{d as y}from"./mrd-longtext-field2.js";import{d as j}from"./mrd-number-field2.js";import{d as k}from"./mrd-relation-field2.js";import{d as x}from"./mrd-secret-field2.js";import{d as w}from"./mrd-text-field2.js";import{d as E}from"./mrd-textarea-field2.js";import{d as O}from"./mrd-time-field2.js";const z=r(class extends e{constructor(r){super(),!1!==r&&this.__registerHost(),this.mrdSubmit=t(this,"mrdSubmit",7),this.mrdCancel=t(this,"mrdCancel",7),this.mrdSearch=t(this,"mrdSearch",7),this.mrdFetchAll=t(this,"mrdFetchAll",7),this.mrdUpload=t(this,"mrdUpload",7),this.locale=navigator.language,this.values={},this.referenceHref="",this.referenceClass="",this.showCancel=!1,this.formValues={},this.errors={},this.submitted=!1,this.initialValues={},this.handleFieldChange=r=>{const{name:e,value:t}=r.detail,i=this.getHref(this.formValues[e]);this.formValues=Object.assign(Object.assign({},this.formValues),{[e]:t}),this.errors[e]&&(this.errors=Object.assign(Object.assign({},this.errors),{[e]:""}));const o=this.getHref(t);if(o!==i)for(const r of this.collectDependentDropdowns())r.commonRelation===e&&(this.formValues=Object.assign(Object.assign({},this.formValues),{[r.name]:null}),this.mrdFetchAll.emit({name:r.name,relatedClass:r.relatedClass,mostSignificantClass:r.mostSignificantClass,commonRelation:r.commonRelation,filter:r.commonRelation+"_href",filterValue:o}))},this.handleSearch=r=>{r.stopPropagation(),this.mrdSearch.emit(r.detail)},this.handleFetchAll=r=>{r.stopPropagation(),this.mrdFetchAll.emit(r.detail)},this.handleUpload=r=>{r.stopPropagation(),this.mrdUpload.emit(r.detail)},this.handleSubmit=r=>{r.preventDefault(),this.submitted=!0,this.validate()&&this.mrdSubmit.emit(this.buildSubmitPayload())}}componentWillLoad(){var r,e;this.initialValues=Object.assign({},null!==(r=this.values)&&void 0!==r?r:{}),this.formValues=Object.assign({},null!==(e=this.values)&&void 0!==e?e:{})}componentDidLoad(){setTimeout((()=>{this.applyReferenceValue(),this.emitDependentFetchAll()}),0)}valuesChanged(r){this.initialValues=Object.assign({},null!=r?r:{}),this.formValues=Object.assign({},null!=r?r:{}),this.applyReferenceValue(),this.errors={},this.submitted=!1,setTimeout((()=>this.emitDependentFetchAll()),0)}applyReferenceValue(){if(!this.referenceHref||!this.referenceClass)return;const r=this.resolveReferenceFieldName();r&&(this.formValues[r]||(this.formValues=Object.assign(Object.assign({},this.formValues),{[r]:this.referenceHref})))}resolveReferenceFieldName(){var r,e;const t=this.collectFields(null!==(e=null===(r=this.layout)||void 0===r?void 0:r.items)&&void 0!==e?e:[]),i=t.find((r=>r.type===d.RELATION&&r.mostSignificantClass===this.referenceClass));if(null==i?void 0:i.name)return i.name;const o=new Set(t.filter((r=>r.type===d.RELATION)).map((r=>r.name)));for(const r of t)if(r.type===d.RELATION&&r.editBehavior===m.DROPDOWN&&r.commonRelation&&!o.has(r.commonRelation))return r.commonRelation;return null}async setFieldValue(r,e){this.formValues=Object.assign(Object.assign({},this.formValues),{[r]:e}),this.errors[r]&&(this.errors=Object.assign(Object.assign({},this.errors),{[r]:""}))}collectDependentDropdowns(){var r,e;return this.collectFields(null!==(e=null===(r=this.layout)||void 0===r?void 0:r.items)&&void 0!==e?e:[]).filter((r=>r.type===d.RELATION&&r.editBehavior===m.DROPDOWN&&!!r.commonRelation))}emitDependentFetchAll(){for(const r of this.collectDependentDropdowns()){const e=this.getHref(this.formValues[r.commonRelation]);e&&this.mrdFetchAll.emit({name:r.name,relatedClass:r.relatedClass,mostSignificantClass:r.mostSignificantClass,commonRelation:r.commonRelation,filter:r.commonRelation+"_href",filterValue:e})}}getHref(r){return r?"string"==typeof r?r:"object"==typeof r&&"id"in r?r.id:"":""}collectFields(r){const e=[];for(const t of r)t.type!==d.FIELD&&t.type!==d.RELATION||e.push(t),t.items&&e.push(...this.collectFields(t.items));return e}validate(){var r,e;const t={},i=this.collectFields(null!==(e=null===(r=this.layout)||void 0===r?void 0:r.items)&&void 0!==e?e:[]);for(const r of i)r.name&&r.required&&!a(this.formValues[r.name])&&(t[r.name]=l("required",this.locale));return this.errors=t,0===Object.keys(t).length}normalizeFieldValue(r){return""===r||null==r?null:r}normalizeRelationValue(r){return null==r||""===r?null:"string"==typeof r?r||null:Array.isArray(r)?r.map((r=>"object"==typeof r&&null!==r&&"id"in r?r.id:r+"")):"object"==typeof r&&"id"in r&&r.id||null}deepEqual(r,e){if(r===e)return!0;if(null==r&&null==e)return!0;if(null==r||null==e)return!1;if(Array.isArray(r)&&Array.isArray(e)){if(r.length!==e.length)return!1;const t=[...r].sort(),i=[...e].sort();return JSON.stringify(t)===JSON.stringify(i)}return JSON.stringify(r)===JSON.stringify(e)}buildSubmitPayload(){var r,e;const t={},i=this.collectFields(null!==(e=null===(r=this.layout)||void 0===r?void 0:r.items)&&void 0!==e?e:[]);for(const r of i){if(!r.name)continue;const e=r.name;if(r.type===d.FIELD){const r=this.formValues[e];if(r instanceof File)continue;const i=this.normalizeFieldValue(r),o=this.normalizeFieldValue(this.initialValues[e]);if(this.deepEqual(i,o))continue;t[e]=i}else if(r.type===d.RELATION){const r=this.normalizeRelationValue(this.formValues[e]),i=this.normalizeRelationValue(this.initialValues[e]);if(this.deepEqual(r,i))continue;t[e]=r}}return t}renderItems(r){return r.map((r=>{var e;if(r.type===d.SECTION)return i("fieldset",{class:"mrd-form__section"},r.label&&i("legend",{class:"mrd-form__section-legend"},r.label),i("div",{class:"mrd-form__section-body"},r.items&&this.renderItems(r.items)));if(r.type===d.GROUP)return i("div",{class:"mrd-form__group"},r.label&&i("div",{class:"mrd-form__group-label"},r.label),i("div",{class:"mrd-form__group-body"},r.items&&this.renderItems(r.items)));const t=null!==(e=r.name)&&void 0!==e?e:"";return i("div",{class:"mrd-form__field"},i("mrd-field",{item:r,locale:this.locale,value:this.formValues[t],onMrdChange:this.handleFieldChange,onMrdBlur:this.handleFieldChange,onMrdSearch:this.handleSearch,onMrdFetchAll:this.handleFetchAll,onMrdUpload:this.handleUpload}),this.errors[t]&&i("span",{class:"mrd-form__field-error"},this.errors[t]))}))}render(){if(!this.layout)return i(o,null);const r=this.locale.startsWith("ar")?"rtl":"ltr";return i(o,null,i("form",{class:"mrd-form",dir:r,onSubmit:this.handleSubmit,noValidate:!0},this.layout.title&&i("h2",{class:"mrd-form__title"},this.layout.title),i("div",{class:"mrd-form__body"},this.renderItems(this.layout.items)),i("div",{class:"mrd-form__footer"},i("button",{type:"submit",class:"mrd-form__submit"},l("submit",this.locale)),this.showCancel&&i("button",{type:"button",class:"mrd-form__cancel",onClick:()=>this.mrdCancel.emit()},l("cancel",this.locale)))))}static get watchers(){return{values:[{valuesChanged:0}]}}static get style(){return".sc-mrd-form-h{display:block}.mrd-form.sc-mrd-form{font-family:var(--mrd-font-family);width:100%}.mrd-form__title.sc-mrd-form{font-size:var(--mrd-font-size-2xl);font-weight:var(--mrd-font-weight-bold);color:var(--mrd-color-neutral-900);margin:0 0 var(--mrd-space-6) 0}.mrd-form__body.sc-mrd-form{display:flex;flex-direction:column;gap:var(--mrd-space-5)}.mrd-form__field.sc-mrd-form{display:flex;flex-direction:column;gap:var(--mrd-space-1)}.mrd-form__field-error.sc-mrd-form{font-family:var(--mrd-font-family);font-size:var(--mrd-error-font-size);color:var(--mrd-error-color)}.mrd-form__section.sc-mrd-form{border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius-md);padding:var(--mrd-space-4) var(--mrd-space-5);margin:0}.mrd-form__section-legend.sc-mrd-form{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);font-weight:var(--mrd-font-weight-semibold);color:var(--mrd-color-neutral-700);padding:0 var(--mrd-space-2)}.mrd-form__section-body.sc-mrd-form{display:flex;flex-direction:column;gap:var(--mrd-space-4);margin-top:var(--mrd-space-2)}.mrd-form__group.sc-mrd-form{display:flex;flex-direction:column;gap:var(--mrd-space-2)}.mrd-form__group-label.sc-mrd-form{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);font-weight:var(--mrd-font-weight-semibold);color:var(--mrd-color-neutral-500);text-transform:uppercase;letter-spacing:0.05em}.mrd-form__group-body.sc-mrd-form{display:flex;flex-direction:column;gap:var(--mrd-space-4);padding-left:var(--mrd-space-4);border-left:3px solid var(--mrd-color-neutral-200)}.mrd-form__footer.sc-mrd-form{margin-top:var(--mrd-space-8);padding-top:var(--mrd-space-5);border-top:var(--mrd-border-width) solid var(--mrd-border-color);display:flex;justify-content:flex-end;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)}"}},[2,"mrd-form",{layout:[16],locale:[1],values:[16],referenceHref:[1,"reference-href"],referenceClass:[1,"reference-class"],showCancel:[4,"show-cancel"],formValues:[32],errors:[32],submitted:[32],setFieldValue:[64]},void 0,{values:[{valuesChanged:0}]}]),C=z,S=function(){"undefined"!=typeof customElements&&["mrd-form","mrd-boolean-field","mrd-currency-field","mrd-date-field","mrd-datetime-field","mrd-email-field","mrd-field","mrd-file-field","mrd-hyperlink-field","mrd-image-field","mrd-list-field","mrd-longtext-field","mrd-number-field","mrd-relation-field","mrd-secret-field","mrd-text-field","mrd-textarea-field","mrd-time-field"].forEach((r=>{switch(r){case"mrd-form":customElements.get(s(r))||customElements.define(s(r),z);break;case"mrd-boolean-field":customElements.get(s(r))||n();break;case"mrd-currency-field":customElements.get(s(r))||c();break;case"mrd-date-field":customElements.get(s(r))||f();break;case"mrd-datetime-field":customElements.get(s(r))||u();break;case"mrd-email-field":customElements.get(s(r))||h();break;case"mrd-field":customElements.get(s(r))||v();break;case"mrd-file-field":customElements.get(s(r))||p();break;case"mrd-hyperlink-field":customElements.get(s(r))||b();break;case"mrd-image-field":customElements.get(s(r))||g();break;case"mrd-list-field":customElements.get(s(r))||_();break;case"mrd-longtext-field":customElements.get(s(r))||y();break;case"mrd-number-field":customElements.get(s(r))||j();break;case"mrd-relation-field":customElements.get(s(r))||k();break;case"mrd-secret-field":customElements.get(s(r))||x();break;case"mrd-text-field":customElements.get(s(r))||w();break;case"mrd-textarea-field":customElements.get(s(r))||E();break;case"mrd-time-field":customElements.get(s(r))||O()}}))};export{C as MrdForm,S as defineCustomElement}
+import{proxyCustomElement as r,HTMLElement as e,createEvent as t,h as i,Host as o,transformTag as s}from"@stencil/core/internal/client";import{a as d,d as m}from"./client-layout.js";import{t as l}from"./i18n.js";import{v as a}from"./validation.js";import{d as n}from"./mrd-boolean-field2.js";import{d as c}from"./mrd-currency-field2.js";import{d as f}from"./mrd-date-field2.js";import{d as u}from"./mrd-datetime-field2.js";import{d as h}from"./mrd-email-field2.js";import{d as v}from"./mrd-field2.js";import{d as p}from"./mrd-file-field2.js";import{d as b}from"./mrd-hyperlink-field2.js";import{d as g}from"./mrd-image-field2.js";import{d as _}from"./mrd-list-field2.js";import{d as y}from"./mrd-longtext-field2.js";import{d as j}from"./mrd-number-field2.js";import{d as k}from"./mrd-relation-field2.js";import{d as x}from"./mrd-secret-field2.js";import{d as w}from"./mrd-text-field2.js";import{d as O}from"./mrd-textarea-field2.js";import{d as E}from"./mrd-time-field2.js";const C=r(class extends e{constructor(r){super(),!1!==r&&this.__registerHost(),this.mrdSubmit=t(this,"mrdSubmit",7),this.mrdCancel=t(this,"mrdCancel",7),this.mrdSearch=t(this,"mrdSearch",7),this.mrdFetchAll=t(this,"mrdFetchAll",7),this.mrdUpload=t(this,"mrdUpload",7),this.locale=navigator.language,this.values={},this.referenceHref="",this.referenceClass="",this.showCancel=!1,this.me=null,this.formValues={},this.errors={},this.submitted=!1,this.initialValues={},this.handleFieldChange=r=>{const{name:e,value:t}=r.detail,i=this.getHref(this.formValues[e]);this.formValues=Object.assign(Object.assign({},this.formValues),{[e]:t}),this.errors[e]&&(this.errors=Object.assign(Object.assign({},this.errors),{[e]:""}));const o=this.getHref(t);if(o!==i)for(const r of this.collectDependentDropdowns())r.commonRelation===e&&(this.formValues=Object.assign(Object.assign({},this.formValues),{[r.name]:null}),this.mrdFetchAll.emit({name:r.name,relatedClass:r.relatedClass,mostSignificantClass:r.mostSignificantClass,commonRelation:r.commonRelation,filter:r.commonRelation+"_href",filterValue:o}))},this.handleSearch=r=>{r.stopPropagation(),this.mrdSearch.emit(r.detail)},this.handleFetchAll=r=>{r.stopPropagation(),this.mrdFetchAll.emit(r.detail)},this.handleUpload=r=>{r.stopPropagation(),this.mrdUpload.emit(r.detail)},this.handleSubmit=r=>{r.preventDefault(),this.submitted=!0,this.validate()&&this.mrdSubmit.emit(this.buildSubmitPayload())}}componentWillLoad(){var r,e;this.initialValues=Object.assign({},null!==(r=this.values)&&void 0!==r?r:{}),this.formValues=Object.assign({},null!==(e=this.values)&&void 0!==e?e:{}),this.applyDefaultValues()}componentDidLoad(){setTimeout((()=>{this.applyReferenceValue(),this.emitDependentFetchAll()}),0)}valuesChanged(r){this.initialValues=Object.assign({},null!=r?r:{}),this.formValues=Object.assign({},null!=r?r:{}),this.applyReferenceValue(),this.applyDefaultValues(),this.errors={},this.submitted=!1,setTimeout((()=>this.emitDependentFetchAll()),0)}meChanged(){this.applyDefaultValues()}applyDefaultValues(){var r,e,t,i,o,s,m,l;const a=this.collectFields(null!==(e=null===(r=this.layout)||void 0===r?void 0:r.items)&&void 0!==e?e:[]),n={};for(const r of a){if(!r.name)continue;const e=this.formValues[r.name];if(null!=e&&""!==e)continue;const a=null!==(o=null!==(t=r.defaultValue)&&void 0!==t?t:null===(i=r.field)||void 0===i?void 0:i.defaultValue)&&void 0!==o?o:null===(s=r.relation)||void 0===s?void 0:s.defaultValue;if(a)if(r.type===d.FIELD){const e=this.resolveFieldDefault(a,null!==(m=r.dataType)&&void 0!==m?m:null===(l=r.field)||void 0===l?void 0:l.dataType);null!=e&&(n[r.name]=e)}else r.type===d.RELATION&&"me()"===a&&this.me&&(n[r.name]=this.me)}Object.keys(n).length>0&&(this.formValues=Object.assign(Object.assign({},this.formValues),n))}resolveFieldDefault(r,e){return"today()"===r?(new Date).toISOString().slice(0,10):"now()"===r?(new Date).toISOString().replace(/\.\d{3}Z$/,"Z"):r}applyReferenceValue(){if(!this.referenceHref||!this.referenceClass)return;const r=this.resolveReferenceFieldName();r&&(this.formValues[r]||(this.formValues=Object.assign(Object.assign({},this.formValues),{[r]:this.referenceHref})))}resolveReferenceFieldName(){var r,e;const t=this.collectFields(null!==(e=null===(r=this.layout)||void 0===r?void 0:r.items)&&void 0!==e?e:[]),i=t.find((r=>r.type===d.RELATION&&r.mostSignificantClass===this.referenceClass));if(null==i?void 0:i.name)return i.name;const o=new Set(t.filter((r=>r.type===d.RELATION)).map((r=>r.name)));for(const r of t)if(r.type===d.RELATION&&r.editBehavior===m.DROPDOWN&&r.commonRelation&&!o.has(r.commonRelation))return r.commonRelation;return null}async setFieldValue(r,e){this.formValues=Object.assign(Object.assign({},this.formValues),{[r]:e}),this.errors[r]&&(this.errors=Object.assign(Object.assign({},this.errors),{[r]:""}))}collectDependentDropdowns(){var r,e;return this.collectFields(null!==(e=null===(r=this.layout)||void 0===r?void 0:r.items)&&void 0!==e?e:[]).filter((r=>r.type===d.RELATION&&r.editBehavior===m.DROPDOWN&&!!r.commonRelation))}emitDependentFetchAll(){for(const r of this.collectDependentDropdowns()){const e=this.getHref(this.formValues[r.commonRelation]);e&&this.mrdFetchAll.emit({name:r.name,relatedClass:r.relatedClass,mostSignificantClass:r.mostSignificantClass,commonRelation:r.commonRelation,filter:r.commonRelation+"_href",filterValue:e})}}getHref(r){return r?"string"==typeof r?r:"object"==typeof r&&"id"in r?r.id:"":""}collectFields(r){const e=[];for(const t of r)t.type!==d.FIELD&&t.type!==d.RELATION||e.push(t),t.items&&e.push(...this.collectFields(t.items));return e}validate(){var r,e;const t={},i=this.collectFields(null!==(e=null===(r=this.layout)||void 0===r?void 0:r.items)&&void 0!==e?e:[]);for(const r of i)r.name&&r.required&&!a(this.formValues[r.name])&&(t[r.name]=l("required",this.locale));return this.errors=t,0===Object.keys(t).length}normalizeFieldValue(r){return""===r||null==r?null:r}normalizeRelationValue(r){return null==r||""===r?null:"string"==typeof r?r||null:Array.isArray(r)?r.map((r=>"object"==typeof r&&null!==r&&"id"in r?r.id:r+"")):"object"==typeof r&&"id"in r&&r.id||null}deepEqual(r,e){if(r===e)return!0;if(null==r&&null==e)return!0;if(null==r||null==e)return!1;if(Array.isArray(r)&&Array.isArray(e)){if(r.length!==e.length)return!1;const t=[...r].sort(),i=[...e].sort();return JSON.stringify(t)===JSON.stringify(i)}return JSON.stringify(r)===JSON.stringify(e)}buildSubmitPayload(){var r,e;const t={},i=this.collectFields(null!==(e=null===(r=this.layout)||void 0===r?void 0:r.items)&&void 0!==e?e:[]);for(const r of i){if(!r.name)continue;const e=r.name;if(r.type===d.FIELD){const r=this.formValues[e];if(r instanceof File)continue;const i=this.normalizeFieldValue(r),o=this.normalizeFieldValue(this.initialValues[e]);if(this.deepEqual(i,o))continue;t[e]=i}else if(r.type===d.RELATION){const r=this.normalizeRelationValue(this.formValues[e]),i=this.normalizeRelationValue(this.initialValues[e]);if(this.deepEqual(r,i))continue;t[e]=r}}return t}renderItems(r){return r.map((r=>{var e;if(r.type===d.SECTION)return i("fieldset",{class:"mrd-form__section"},r.label&&i("legend",{class:"mrd-form__section-legend"},r.label),i("div",{class:"mrd-form__section-body"},r.items&&this.renderItems(r.items)));if(r.type===d.GROUP)return i("div",{class:"mrd-form__group"},r.label&&i("div",{class:"mrd-form__group-label"},r.label),i("div",{class:"mrd-form__group-body"},r.items&&this.renderItems(r.items)));const t=null!==(e=r.name)&&void 0!==e?e:"";return i("div",{class:"mrd-form__field"},i("mrd-field",{item:r,locale:this.locale,value:this.formValues[t],onMrdChange:this.handleFieldChange,onMrdBlur:this.handleFieldChange,onMrdSearch:this.handleSearch,onMrdFetchAll:this.handleFetchAll,onMrdUpload:this.handleUpload}),this.errors[t]&&i("span",{class:"mrd-form__field-error"},this.errors[t]))}))}render(){if(!this.layout)return i(o,null);const r=this.locale.startsWith("ar")?"rtl":"ltr";return i(o,null,i("form",{class:"mrd-form",dir:r,onSubmit:this.handleSubmit,noValidate:!0},this.layout.title&&i("h2",{class:"mrd-form__title"},this.layout.title),i("div",{class:"mrd-form__body"},this.renderItems(this.layout.items)),i("div",{class:"mrd-form__footer"},i("button",{type:"submit",class:"mrd-form__submit"},l("submit",this.locale)),this.showCancel&&i("button",{type:"button",class:"mrd-form__cancel",onClick:()=>this.mrdCancel.emit()},l("cancel",this.locale)))))}static get watchers(){return{values:[{valuesChanged:0}],me:[{meChanged:0}]}}static get style(){return".sc-mrd-form-h{display:block}.mrd-form.sc-mrd-form{font-family:var(--mrd-font-family);width:100%}.mrd-form__title.sc-mrd-form{font-size:var(--mrd-font-size-2xl);font-weight:var(--mrd-font-weight-bold);color:var(--mrd-color-neutral-900);margin:0 0 var(--mrd-space-6) 0}.mrd-form__body.sc-mrd-form{display:flex;flex-direction:column;gap:var(--mrd-space-5)}.mrd-form__field.sc-mrd-form{display:flex;flex-direction:column;gap:var(--mrd-space-1)}.mrd-form__field-error.sc-mrd-form{font-family:var(--mrd-font-family);font-size:var(--mrd-error-font-size);color:var(--mrd-error-color)}.mrd-form__section.sc-mrd-form{border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius-md);padding:var(--mrd-space-4) var(--mrd-space-5);margin:0}.mrd-form__section-legend.sc-mrd-form{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);font-weight:var(--mrd-font-weight-semibold);color:var(--mrd-color-neutral-700);padding:0 var(--mrd-space-2)}.mrd-form__section-body.sc-mrd-form{display:flex;flex-direction:column;gap:var(--mrd-space-4);margin-top:var(--mrd-space-2)}.mrd-form__group.sc-mrd-form{display:flex;flex-direction:column;gap:var(--mrd-space-2)}.mrd-form__group-label.sc-mrd-form{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);font-weight:var(--mrd-font-weight-semibold);color:var(--mrd-color-neutral-500);text-transform:uppercase;letter-spacing:0.05em}.mrd-form__group-body.sc-mrd-form{display:flex;flex-direction:column;gap:var(--mrd-space-4);padding-left:var(--mrd-space-4);border-left:3px solid var(--mrd-color-neutral-200)}.mrd-form__footer.sc-mrd-form{margin-top:var(--mrd-space-8);padding-top:var(--mrd-space-5);border-top:var(--mrd-border-width) solid var(--mrd-border-color);display:flex;justify-content:flex-end;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)}"}},[2,"mrd-form",{layout:[16],locale:[1],values:[16],referenceHref:[1,"reference-href"],referenceClass:[1,"reference-class"],showCancel:[4,"show-cancel"],me:[16],formValues:[32],errors:[32],submitted:[32],setFieldValue:[64]},void 0,{values:[{valuesChanged:0}],me:[{meChanged:0}]}]),z=C,S=function(){"undefined"!=typeof customElements&&["mrd-form","mrd-boolean-field","mrd-currency-field","mrd-date-field","mrd-datetime-field","mrd-email-field","mrd-field","mrd-file-field","mrd-hyperlink-field","mrd-image-field","mrd-list-field","mrd-longtext-field","mrd-number-field","mrd-relation-field","mrd-secret-field","mrd-text-field","mrd-textarea-field","mrd-time-field"].forEach((r=>{switch(r){case"mrd-form":customElements.get(s(r))||customElements.define(s(r),C);break;case"mrd-boolean-field":customElements.get(s(r))||n();break;case"mrd-currency-field":customElements.get(s(r))||c();break;case"mrd-date-field":customElements.get(s(r))||f();break;case"mrd-datetime-field":customElements.get(s(r))||u();break;case"mrd-email-field":customElements.get(s(r))||h();break;case"mrd-field":customElements.get(s(r))||v();break;case"mrd-file-field":customElements.get(s(r))||p();break;case"mrd-hyperlink-field":customElements.get(s(r))||b();break;case"mrd-image-field":customElements.get(s(r))||g();break;case"mrd-list-field":customElements.get(s(r))||_();break;case"mrd-longtext-field":customElements.get(s(r))||y();break;case"mrd-number-field":customElements.get(s(r))||j();break;case"mrd-relation-field":customElements.get(s(r))||k();break;case"mrd-secret-field":customElements.get(s(r))||x();break;case"mrd-text-field":customElements.get(s(r))||w();break;case"mrd-textarea-field":customElements.get(s(r))||O();break;case"mrd-time-field":customElements.get(s(r))||E()}}))};export{z as MrdForm,S as defineCustomElement}

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

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