@mmlogic/components 0.3.0 → 0.3.1

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

@@ -65,10 +65,16 @@ export class MrdTable {
         this.jsonModal = null;
         /** Aggregation totals received from the host via setAggregations(). Null = not yet loaded. */
         this.aggregations = null;
+        /** Record count received via setAggregations().total; overrides totalElements for display. */
+        this.aggregationsTotal = null;
+        /** True when a fresh aggregations request is needed (set on init / filter change). */
+        this.aggregationsPending = false;
+        /** Lower bound on total derived from setPage() hasNext info; grows as pages load. */
+        this.minKnownTotal = 0;
         this.handleScroll = (e) => {
             const scroller = e.currentTarget;
             const scrollTop = scroller.scrollTop;
-            const total = this.totalElements;
+            const total = this.baseTotal;
             const visStart = Math.floor(scrollTop / this.rowHeight);
             const visEnd = Math.min(visStart + this.visibleCount(), total - 1);
             this.scrollTop = scrollTop;
@@ -130,7 +136,9 @@ export class MrdTable {
         if (scroller)
             scroller.scrollTop = 0;
         this.aggregations = null;
-        this.emitLoadAggregations();
+        this.aggregationsTotal = null;
+        this.aggregationsPending = true;
+        this.minKnownTotal = 0;
         // Always request page 0 — totalElements may be unknown (0) on first load.
         this.mrdLoadPage.emit({ page: 0, sort: this.sortParam(), path: this.buildDataPath(), qs: this.buildQueryParams(0) });
         this.requestedPages = new Set([0]);
@@ -142,20 +150,41 @@ export class MrdTable {
      * 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.
+     *
+     * Pass hasNext (from _links.next in the API response) for accurate last-page
+     * detection even when rows.length === pageSize (exact multiple of page size).
      */
-    async setPage(pageNumber, rows) {
-        if (rows.length < this.pageSize) {
+    async setPage(pageNumber, rows, hasNext) {
+        const isLastPage = hasNext !== undefined ? !hasNext : rows.length < this.pageSize;
+        if (isLastPage) {
             // 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);
+            // Exact total is known: update minKnownTotal so the scroll container has the right height.
+            this.minKnownTotal = pageNumber * this.pageSize + rows.length;
+        }
+        else {
+            // There is at least one more page — ensure the scrollbar covers at least that next page.
+            this.minKnownTotal = Math.max(this.minKnownTotal, (pageNumber + 1) * this.pageSize + 1);
         }
         const next = new Map(this.loadedPages);
         next.set(pageNumber, rows);
         this.loadedPages = next;
+        if (pageNumber === 0 && this.aggregationsPending) {
+            this.aggregationsPending = false;
+            const hasAggColumns = this.columns.some(c => c.type === 'FIELD' && c.aggregate);
+            if (!isLastPage || hasAggColumns) {
+                this.emitLoadAggregations();
+            }
+        }
     }
     /** Inject aggregation totals returned by the /aggregations endpoint. */
     async setAggregations(data) {
+        var _a;
+        const total = (_a = data.total) !== null && _a !== void 0 ? _a : (typeof data.count === 'number' ? data.count : undefined);
+        if (total != null)
+            this.aggregationsTotal = total;
         this.aggregations = data;
     }
     // ── Lifecycle ──────────────────────────────────────────────────────────────
@@ -337,6 +366,25 @@ export class MrdTable {
             return 'RELATION';
         return (_a = col.dataType) !== null && _a !== void 0 ? _a : 'TEXT';
     }
+    /** True when we have a reliable total: either from the aggregations response or because
+     *  a short page told us it was the last page (exact count from row length). */
+    isTotalKnown() {
+        if (this.aggregationsTotal != null)
+            return true;
+        for (const rows of this.loadedPages.values()) {
+            if (rows.length < this.pageSize)
+                return true;
+        }
+        return false;
+    }
+    /** Effective total: aggregations-response > totalElements prop > minKnownTotal from setPage(). */
+    get baseTotal() {
+        if (this.aggregationsTotal != null)
+            return this.aggregationsTotal;
+        if (this.totalElements > 0)
+            return this.totalElements;
+        return this.minKnownTotal;
+    }
     // ── Aggregation helpers ────────────────────────────────────────────────────
     buildAggregationParams() {
         var _a;
@@ -357,17 +405,32 @@ export class MrdTable {
             params.count = groups.count;
         return Object.keys(params).length > 0 ? params : null;
     }
+    buildAggregationQs() {
+        var _a, _b, _c;
+        const p = new URLSearchParams(this.buildQueryParams(0));
+        p.delete('page');
+        p.delete('sort');
+        const groups = this.buildAggregationParams();
+        if ((_a = groups === null || groups === void 0 ? void 0 : groups.sum) === null || _a === void 0 ? void 0 : _a.length)
+            p.set('sum', groups.sum.join(','));
+        if ((_b = groups === null || groups === void 0 ? void 0 : groups.avg) === null || _b === void 0 ? void 0 : _b.length)
+            p.set('avg', groups.avg.join(','));
+        if ((_c = groups === null || groups === void 0 ? void 0 : groups.count) === null || _c === void 0 ? void 0 : _c.length)
+            p.set('count', groups.count.join(','));
+        return p.toString();
+    }
     emitLoadAggregations() {
-        const aggParams = this.buildAggregationParams();
-        if (aggParams)
-            this.mrdLoadAggregations.emit(Object.assign(Object.assign({}, aggParams), { path: this.buildDataPath(), qs: this.buildQueryParams(0) }));
+        this.mrdLoadAggregations.emit({ path: this.buildDataPath(), qs: this.buildQueryParams(0), aggQs: this.buildAggregationQs() });
     }
     renderAggregationValue(col) {
-        var _a, _b;
+        var _a;
         if (col.type !== 'FIELD' || !col.aggregate || !this.aggregations)
             return '';
         const fn = col.aggregate.toLowerCase();
-        const val = (_a = this.aggregations[fn]) === null || _a === void 0 ? void 0 : _a[(_b = col.name) !== null && _b !== void 0 ? _b : ''];
+        const aggData = this.aggregations[fn];
+        const val = typeof aggData === 'object' && aggData !== null
+            ? aggData[(_a = col.name) !== null && _a !== void 0 ? _a : '']
+            : undefined;
         if (val == null)
             return '';
         const dt = col.dataType;
@@ -392,9 +455,10 @@ export class MrdTable {
         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));
+        this.minKnownTotal = 0;
+        // Mirror init(): use visibleCount so the first page is always requested.
+        // setPage() will clamp renderEnd down when the last page is shorter.
+        this.renderEnd = this.visibleCount() - 1;
         const scroller = this.el.querySelector('.mrd-table__scroll');
         if (scroller)
             scroller.scrollTop = 0;
@@ -660,7 +724,8 @@ export class MrdTable {
         this.activeFilters = next;
         this.closeFilterPopup();
         this.aggregations = null;
-        this.emitLoadAggregations();
+        this.aggregationsTotal = null;
+        this.aggregationsPending = true;
         if (this.totalElements > 0) {
             this.resetPages();
             this.emitPagesForWindow(this.renderStart, this.renderEnd);
@@ -674,7 +739,8 @@ export class MrdTable {
         this.activeFilters = next;
         this.closeFilterPopup();
         this.aggregations = null;
-        this.emitLoadAggregations();
+        this.aggregationsTotal = null;
+        this.aggregationsPending = true;
         if (this.totalElements > 0) {
             this.resetPages();
             this.emitPagesForWindow(this.renderStart, this.renderEnd);
@@ -683,7 +749,8 @@ export class MrdTable {
     clearAllFilters() {
         this.activeFilters = new Map();
         this.aggregations = null;
-        this.emitLoadAggregations();
+        this.aggregationsTotal = null;
+        this.aggregationsPending = true;
         if (this.totalElements > 0) {
             this.resetPages();
             this.emitPagesForWindow(this.renderStart, this.renderEnd);
@@ -807,10 +874,9 @@ export class MrdTable {
         return (h("div", { class: "mrd-table__filter-popup", style: { top: `${this.popupPos.top}px`, left: `${this.popupPos.left}px` }, onClick: (e) => e.stopPropagation() }, h("div", { class: "mrd-table__filter-popup-header" }, h("span", { class: "mrd-table__filter-popup-title" }, label), h("button", { class: "mrd-table__filter-close", onClick: () => this.closeFilterPopup() }, "\u2715")), h("div", { class: "mrd-table__filter-section" }, h("div", { class: "mrd-table__filter-section-label" }, t('filter_sorting', this.locale)), h("div", { class: "mrd-table__filter-sort-buttons" }, 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)), 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)))), h("div", { class: "mrd-table__filter-divider" }), h("div", { class: "mrd-table__filter-section" }, h("div", { class: "mrd-table__filter-section-label" }, t('filter_section', this.locale)), this.renderFilterEditor(col)), h("div", { class: "mrd-table__filter-popup-footer" }, h("button", { class: "mrd-table__filter-btn mrd-table__filter-btn--clear", onClick: () => this.clearFilter() }, t('filter_clear', this.locale)), 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) {
+    renderFooter(rowCount, effectiveTotal, isTotalKnown = true) {
+        // Non-paginated mode: totalElements=0 and no paginated data loaded yet
+        if (this.totalElements === 0 && this.loadedPages.size === 0) {
             const count = rowCount !== null && rowCount !== void 0 ? rowCount : 0;
             if (count === 0)
                 return null;
@@ -819,13 +885,14 @@ export class MrdTable {
         // 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;
+        // effectiveTotal from render(); fall back to baseTotal when not provided.
+        const displayTotal = effectiveTotal !== null && effectiveTotal !== void 0 ? effectiveTotal : this.baseTotal;
         // 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 (h("div", { class: "mrd-table__footer" }, from, "\u2013", to, " ", t('table_of', this.locale), " ", displayTotal));
+        // Show '…' for the total until we have a reliable count (aggregations or last page loaded).
+        const totalLabel = isTotalKnown ? String(displayTotal) : '…';
+        return (h("div", { class: "mrd-table__footer" }, from, "\u2013", to, " ", t('table_of', this.locale), " ", totalLabel));
     }
     // ── Render: cell ──────────────────────────────────────────────────────────
     renderCell(col, row) {
@@ -884,7 +951,9 @@ export class MrdTable {
         if (!((_a = this.columns) === null || _a === void 0 ? void 0 : _a.length))
             return null;
         // ── Non-paginated mode ──────────────────────────────────────────────────
-        if (this.totalElements === 0) {
+        // Only enter non-paginated mode when totalElements is 0 AND no paginated data
+        // has been loaded yet — prevents the wrong branch when the host omits totalElements.
+        if (this.totalElements === 0 && this.loadedPages.size === 0) {
             return (h(Host, null, this.renderToolbar(), h("div", { class: "mrd-table" }, h("table", { class: "mrd-table__table" }, h("thead", null, h("tr", null, this.columns.map(col => {
                 var _a;
                 const name = this.colName(col);
@@ -901,8 +970,8 @@ export class MrdTable {
         // 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;
+        // aggregationsTotal (from setAggregations) takes priority over the totalElements prop.
+        let effectiveTotal = this.baseTotal;
         for (const [pageNum, pageRows] of this.loadedPages) {
             if (pageRows.length < this.pageSize) {
                 effectiveTotal = Math.min(effectiveTotal, pageNum * this.pageSize + pageRows.length);
@@ -939,7 +1008,7 @@ export class MrdTable {
                 isFiltered ? 'mrd-table__header--filtered' : '',
             ].filter(Boolean).join(' ');
             return (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 }, h("span", { class: "mrd-table__header-label" }, (_a = col.label) !== null && _a !== void 0 ? _a : ''), isInteractive && isActive && (h("span", { class: "mrd-table__sort-icon", "aria-hidden": "true" }, this.sortDir === 'asc' ? '▲' : '▼')), isInteractive && !isActive && !this.filterMode && (h("span", { class: "mrd-table__sort-icon", "aria-hidden": "true" }, "\u21C5")), isInteractive && isFiltered && this.renderFilterIcon()));
-        }))), h("tbody", null, topSpacerHeight > 0 && (h("tr", { class: "mrd-table__spacer", style: { height: `${topSpacerHeight}px` } }, h("td", { colSpan: colCount }))), renderedRows, bottomSpacerHeight > 0 && (h("tr", { class: "mrd-table__spacer", style: { height: `${bottomSpacerHeight}px` } }, h("td", { colSpan: colCount })))), this.renderTotalsRow())), effectiveTotal === 0 && this.loadedPages.has(0) && (h("p", { class: "mrd-table__empty" }, t('no_results', this.locale))), effectiveTotal > 0 && this.renderFooter(undefined, effectiveTotal), this.renderFilterPopup(), this.renderTextblockModal()));
+        }))), h("tbody", null, topSpacerHeight > 0 && (h("tr", { class: "mrd-table__spacer", style: { height: `${topSpacerHeight}px` } }, h("td", { colSpan: colCount }))), renderedRows, bottomSpacerHeight > 0 && (h("tr", { class: "mrd-table__spacer", style: { height: `${bottomSpacerHeight}px` } }, h("td", { colSpan: colCount })))), this.renderTotalsRow())), effectiveTotal === 0 && this.loadedPages.has(0) && (h("p", { class: "mrd-table__empty" }, t('no_results', this.locale))), effectiveTotal > 0 && this.renderFooter(undefined, effectiveTotal, this.isTotalKnown()), this.renderFilterPopup(), this.renderTextblockModal()));
     }
     renderFilterIcon() {
         return (h("span", { class: "mrd-table__filter-icon", "aria-hidden": "true" }, h("svg", { viewBox: "0 0 24 24", width: "14", height: "14", fill: "currentColor" }, h("path", { d: "M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z" }))));
@@ -1156,7 +1225,9 @@ export class MrdTable {
             "scrollTop": {},
             "textblockModal": {},
             "jsonModal": {},
-            "aggregations": {}
+            "aggregations": {},
+            "aggregationsTotal": {},
+            "minKnownTotal": {}
         };
     }
     static get events() {
@@ -1233,11 +1304,11 @@ export class MrdTable {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Fired when aggregation totals need to be (re-)fetched.\nDetail contains the fields grouped by aggregate function.\nHost calls the /aggregations endpoint and passes the result to setAggregations()."
+                    "text": "Fired when aggregation totals need to be (re-)fetched.\n`aggQs` is a ready-to-use query string: active filters (no page/sort) + sum/avg/count params.\nHost calls the /aggregations endpoint and passes the result to setAggregations()."
                 },
                 "complexType": {
-                    "original": "{ sum?: string[]; avg?: string[]; count?: string[]; path: string; qs: string }",
-                    "resolved": "{ sum?: string[] | undefined; avg?: string[] | undefined; count?: string[] | undefined; path: string; qs: string; }",
+                    "original": "{ path: string; qs: string; aggQs: string }",
+                    "resolved": "{ path: string; qs: string; aggQs: string; }",
                     "references": {}
                 }
             }];
@@ -1267,7 +1338,7 @@ export class MrdTable {
             },
             "setPage": {
                 "complexType": {
-                    "signature": "(pageNumber: number, rows: Record<string, any>[]) => Promise<void>",
+                    "signature": "(pageNumber: number, rows: Record<string, any>[], hasNext?: boolean) => Promise<void>",
                     "parameters": [{
                             "name": "pageNumber",
                             "type": "number",
@@ -1276,6 +1347,10 @@ export class MrdTable {
                             "name": "rows",
                             "type": "Record<string, any>[]",
                             "docs": ""
+                        }, {
+                            "name": "hasNext",
+                            "type": "boolean | undefined",
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {
@@ -1290,7 +1365,7 @@ export class MrdTable {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Inject the rows for a given page (0-based).\nCreates a new Map reference so Stencil detects the state change.\n\nWhen the page contains fewer rows than pageSize it is the last page.\nrenderEnd is clamped immediately so no loading-placeholder rows appear\nbeyond the actual data \u2014 without requiring the host to update totalElements.",
+                    "text": "Inject the rows for a given page (0-based).\nCreates a new Map reference so Stencil detects the state change.\n\nWhen the page contains fewer rows than pageSize it is the last page.\nrenderEnd is clamped immediately so no loading-placeholder rows appear\nbeyond the actual data \u2014 without requiring the host to update totalElements.\n\nPass hasNext (from _links.next in the API response) for accurate last-page\ndetection even when rows.length === pageSize (exact multiple of page size).",
                     "tags": []
                 }
             },

package/dist/collection/dev/app.js

@@ -379,18 +379,11 @@ function renderSection(index) {
 
   section.addEventListener('mrdLoadViewAggregations', async (e) => {
     if (generation !== _sectionGeneration) return;
-    const { name, path, qs: filterQs, sum, avg, count } = e.detail;
+    const { name, path, aggQs } = e.detail;
     logEvent('mrdLoadViewAggregations', e.detail);
     try {
       const aggUrl = `${_baseHref}${path}/aggregations`;
-      const p = new URLSearchParams(filterQs ?? '');
-      p.delete('page');
-      p.delete('sort');
-      if (sum?.length)   p.set('sum',   sum.join(','));
-      if (avg?.length)   p.set('avg',   avg.join(','));
-      if (count?.length) p.set('count', count.join(','));
-      const qs     = p.toString();
-      const result = await apiRequest('GET', qs ? `${aggUrl}?${qs}` : aggUrl, authGetToken());
+      const result = await apiRequest('GET', aggQs ? `${aggUrl}?${aggQs}` : aggUrl, authGetToken());
       if (result.ok) await section.setViewAggregations(name, result.body);
     } catch (err) {
       console.error('[mrdLoadViewAggregations] mislukt', name, err);

package/dist/components/mrd-layout-section.js

@@ -1 +1 @@
-import{proxyCustomElement as r,HTMLElement as t,createEvent as o,h as e,Host as a,transformTag as i}from"@stencil/core/internal/client";import{a as s,b as l}from"./client-layout.js";import{C as n,d}from"./mrd-table2.js";import{t as c}from"./i18n.js";const m=r(class extends t{constructor(r){super(),!1!==r&&this.__registerHost(),this.mrdNavigate=o(this,"mrdNavigate",7),this.mrdSearch=o(this,"mrdSearch",7),this.mrdDownload=o(this,"mrdDownload",7),this.mrdLoadViewPage=o(this,"mrdLoadViewPage",7),this.mrdLoadImage=o(this,"mrdLoadImage",7),this.mrdViewAction=o(this,"mrdViewAction",7),this.mrdLoadViewAggregations=o(this,"mrdLoadViewAggregations",7),this.items=[],this.data={},this.views={},this.links={},this.locale=navigator.language,this.searchQueryMap={},this.searchResultsMap={},this.imagePreviewUrl=null,this.imagePreviews={},this.searchTimers={},this.handleViewLoadPage=(r,t)=>{r.stopPropagation(),this.mrdLoadViewPage.emit({name:t,page:r.detail.page,sort:r.detail.sort,path:r.detail.path,qs:r.detail.qs})},this.handleSearchInput=(r,t)=>{this.searchQueryMap=Object.assign(Object.assign({},this.searchQueryMap),{[r]:t}),this.searchTimers[r]&&clearTimeout(this.searchTimers[r]),t.length<2?this.searchResultsMap=Object.assign(Object.assign({},this.searchResultsMap),{[r]:[]}):this.searchTimers[r]=setTimeout((()=>{this.mrdSearch.emit({query:t,dataClass:r})}),300)}}componentDidLoad(){setTimeout((()=>{this.initEmbeddedTables(),this.emitLoadImages()}),0)}dataChanged(r){r&&Object.keys(r).length>0&&setTimeout((()=>this.initEmbeddedTables()),0)}async initEmbeddedTables(){const r=this.el.querySelectorAll("mrd-table[data-view]");for(const t of Array.from(r))"function"==typeof t.init&&await t.init()}viewKeyFor(r){var t,o,e,a;return r.type===s.RELATED_VIEW?null!==(o=null!==(t=r.relatedClass)&&void 0!==t?t:r.name)&&void 0!==o?o:"":null!==(a=null!==(e=r.dataClass)&&void 0!==e?e:r.name)&&void 0!==a?a:""}emitLoadImages(){for(const r of this.flattenItems(this.items))if(r.type===s.FIELD&&r.dataType===l.IMAGE){const t=r.name,o=this.data[t],e=null==o?void 0:o.href;e&&this.mrdLoadImage.emit({fieldName:t,href:e})}}flattenItems(r){const t=[];for(const o of r)t.push(o),o.items&&t.push(...this.flattenItems(o.items));return t}async setSearchResults(r,t){const o=null!=t?t:this.resolveSearchKey();o&&(this.searchResultsMap=Object.assign(Object.assign({},this.searchResultsMap),{[o]:r}))}async setViewPage(r,t,o,e){const a=this.el.querySelector(`mrd-table[data-view="${r}"]`);a&&(void 0!==e&&(a.totalElements=e),await a.setPage(t,o))}async setViewAggregations(r,t){const o=this.el.querySelector(`mrd-table[data-view="${r}"]`);o&&await o.setAggregations(t)}async setImagePreview(r,t){this.imagePreviews=Object.assign(Object.assign({},this.imagePreviews),{[r]:t})}async openImagePreview(r){this.imagePreviewUrl=r}resolveSearchKey(){var r;const t=this.flattenItems(this.items).filter((r=>r.type===s.SEARCH));return 1===t.length&&null!==(r=t[0].dataClass)&&void 0!==r?r:null}renderSingleFieldValue(r,t){var o,a,i,s,d,m,u,v,h,y;const p=r.dataType;switch(p){case l.HYPERLINK:{const r=null!==(o=null==t?void 0:t.href)&&void 0!==o?o:t+"",s=null!==(i=null!==(a=null==t?void 0:t.text)&&void 0!==a?a:null==t?void 0:t.label)&&void 0!==i?i:r;return e("a",{class:"mrd-layout-section__link",href:r,target:"_blank",rel:"noopener noreferrer"},s)}case l.TEXTBLOCK:return e("span",{innerHTML:t+""});case l.LONGTEXT:return e("pre",{class:"mrd-layout-section__pre"},t+"");case l.JSON:return e("pre",{class:"mrd-layout-section__pre",innerHTML:n.formatJson(t)});case l.FILE:{const r=null!==(s=null==t?void 0:t.fileName)&&void 0!==s?s:t+"",o=null!==(d=null==t?void 0:t.href)&&void 0!==d?d:"";return e("button",{class:"mrd-layout-section__download-link",onClick:()=>o&&this.mrdDownload.emit({href:o,fileName:r})},e("svg",{class:"mrd-layout-section__file-icon",viewBox:"0 0 24 24","aria-hidden":"true"},e("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"})),c("download",this.locale))}case l.IMAGE:{const o=null!==(m=null==t?void 0:t.href)&&void 0!==m?m:"",a=null!==(u=null==t?void 0:t.fileName)&&void 0!==u?u:"",i=this.imagePreviews[r.name];return i?e("button",{class:"mrd-layout-section__image-thumb-btn",onClick:()=>{this.imagePreviewUrl=i},title:a||void 0},e("img",{class:"mrd-layout-section__image-thumb",src:i,alt:a})):e("button",{class:"mrd-layout-section__download-link",onClick:()=>o&&this.mrdDownload.emit({href:o,fileName:a})},e("svg",{class:"mrd-layout-section__file-icon",viewBox:"0 0 24 24","aria-hidden":"true"},e("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"})),a||o)}case l.BOOLEAN:return e("span",{class:"mrd-layout-section__boolean mrd-layout-section__boolean--"+(t?"true":"false")},c(t?"yes":"no",this.locale));case l.LIST:{const o=(null!==(v=r.listItems)&&void 0!==v?v:[]).find((r=>r.key===t+"")),a=null!==(h=null==o?void 0:o.label)&&void 0!==h?h:t+"",i=null==o?void 0:o.color,s=null==o?void 0:o.backgroundColor;return i&&s?e("span",{class:"mrd-layout-section__badge",style:{color:i,backgroundColor:s}},a):i?e("span",{class:"mrd-layout-section__badge-dot-row"},e("span",{class:"mrd-layout-section__badge-dot",style:{backgroundColor:i}}),a):a}default:return n.renderValue(p,t,null!==(y=r.listItems)&&void 0!==y?y:[],this.locale)||null}}renderFieldValue(r,t){if(null==t||""===t)return null;if(r.multiple&&Array.isArray(t)){const o=t.map((t=>this.renderSingleFieldValue(r,t)));return o.every((r=>"string"==typeof r||null==r))?o.filter(Boolean).join(", ")||null:e("span",null,o.map(((r,t)=>e("span",{key:t+""},r,t<o.length-1?", ":""))))}return this.renderSingleFieldValue(r,t)}renderField(r){if(!r.name)return null;const t=this.data[r.name],o=this.renderFieldValue(r,t);return r.header?e("h1",{class:"mrd-layout-section__field-header",key:r.name},"string"==typeof o?o:null!=t?t+"":r.label):null==o?null:e("div",{class:"mrd-layout-section__field"+(r.dataType===l.TEXTBLOCK||r.dataType===l.LONGTEXT||r.dataType===l.JSON?" mrd-layout-section__field--block":""),key:r.name},e("span",{class:"mrd-layout-section__field-label"},r.label),e("span",{class:"mrd-layout-section__field-value"},o))}renderRelation(r){var t,o,a;if(!r.name)return null;const i=(null!==(o=null===(t=this.data)||void 0===t?void 0:t._links)&&void 0!==o?o:{})[r.name];if(!i)return null;const s=(r,t)=>e("button",{key:r,class:"mrd-layout-section__relation-link",onClick:()=>this.mrdNavigate.emit({href:r,label:t})},t);let l;return(null===(a=i.values)||void 0===a?void 0:a.length)?l=i.values.map((r=>s(r.href,r.name))):i.name&&(l=s(i.href,i.name)),l?e("div",{class:"mrd-layout-section__field",key:r.name},e("span",{class:"mrd-layout-section__field-label"},r.label),e("span",{class:"mrd-layout-section__field-value"},l)):null}renderSearch(r){var t,o,a;if(!r.dataClass)return null;const i=r.dataClass,s=null!==(t=this.searchQueryMap[i])&&void 0!==t?t:"",l=null!==(o=this.searchResultsMap[i])&&void 0!==o?o:[];return e("div",{class:"mrd-layout-section__search",key:"search-"+i},e("div",{class:"mrd-layout-section__search-wrap"},e("svg",{class:"mrd-layout-section__search-icon",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor","aria-hidden":"true"},e("path",{"fill-rule":"evenodd",d:"M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z","clip-rule":"evenodd"})),e("input",{class:"mrd-layout-section__search-input",type:"text",value:s,placeholder:null!==(a=r.label)&&void 0!==a?a:"",onInput:r=>this.handleSearchInput(i,r.target.value)})),l.length>0&&e("ul",{class:"mrd-layout-section__search-results"},l.map((r=>e("li",{key:r.id,class:"mrd-layout-section__search-result"},e("button",{class:"mrd-layout-section__search-result-btn",onClick:()=>this.mrdNavigate.emit({href:r.id,label:r.label})},e("span",{class:"mrd-layout-section__search-result-label"},r.label),r.description&&e("span",{class:"mrd-layout-section__search-result-desc"},r.description)))))))}renderRelatedView(r){var t,o,a,i,s,l;const n=this.viewKeyFor(r);if(!n)return null;if(!r.view)return null;const d=null!==(t=r.showTitle)&&void 0!==t&&t,c=null!==(l=(null!==(s=null===(i=null===(a=null===(o=this.data)||void 0===o?void 0:o._links)||void 0===a?void 0:a.self)||void 0===i?void 0:i.href)&&void 0!==s?s:"").split("/").filter(Boolean).pop())&&void 0!==l?l:"";return e("div",{class:"mrd-layout-section__related-view",key:"view-"+n},d&&r.label&&e("h3",{class:"mrd-layout-section__related-view-title"},r.label),e("mrd-table",{"data-view":n,item:r,parentId:c,locale:this.locale,onMrdLoadPage:r=>this.handleViewLoadPage(r,n),onMrdLoadAggregations:t=>{var o;t.stopPropagation(),this.mrdLoadViewAggregations.emit(Object.assign({name:n,dataClass:null!==(o=r.dataClass)&&void 0!==o?o:n},t.detail))},onMrdRowClick:r=>{var t,o,e;r.stopPropagation();const a=r.detail;this.mrdNavigate.emit({href:null===(o=null===(t=null==a?void 0:a._links)||void 0===t?void 0:t.self)||void 0===o?void 0:o.href,label:null!==(e=null==a?void 0:a.name)&&void 0!==e?e:""})},onMrdAction:t=>{var o;t.stopPropagation(),this.mrdViewAction.emit({name:n,action:t.detail.action,dataClass:null!==(o=r.dataClass)&&void 0!==o?o:n,path:t.detail.path,qs:t.detail.qs,parentPath:t.detail.parentPath})}}))}renderItem(r){var t,o;switch(r.type){case s.FIELD:return this.renderField(r);case s.RELATION:return this.renderRelation(r);case s.HEADER:return e("h2",{class:"mrd-layout-section__header",key:"header-"+r.label},r.label);case s.TEXT:return e("div",{class:"mrd-layout-section__text",key:"text-"+r.label,innerHTML:null!==(t=r.label)&&void 0!==t?t:""});case s.NAVIGATE:return e("button",{class:"mrd-layout-section__navigate",key:"nav-"+r.label,onClick:()=>{var t,o,e;return this.mrdNavigate.emit({label:null!==(t=r.label)&&void 0!==t?t:"",navigate:null!==(o=r.navigate)&&void 0!==o?o:{dataClass:null!==(e=r.dataClass)&&void 0!==e?e:"",icon:r.icon,navigationType:r.navigationType}})}},r.label);case s.SEARCH:return this.renderSearch(r);case s.SECTION:case s.GROUP:return e("div",{class:"mrd-layout-section__group",key:"group-"+r.label},r.label&&e("h3",{class:"mrd-layout-section__group-title"},r.label),(null!==(o=r.items)&&void 0!==o?o:[]).map((r=>this.renderItem(r))));case s.RELATED_VIEW:case s.VIEW:return this.renderRelatedView(r);default:return null}}renderImageModal(){return this.imagePreviewUrl?e("div",{class:"mrd-layout-section__modal-backdrop",onClick:()=>{this.imagePreviewUrl=null}},e("div",{class:"mrd-layout-section__modal",onClick:r=>r.stopPropagation()},e("button",{class:"mrd-layout-section__modal-close",onClick:()=>{this.imagePreviewUrl=null}},"✕"),e("img",{class:"mrd-layout-section__modal-image",src:this.imagePreviewUrl,alt:""}))):null}render(){return e(a,{key:"a7b6514d19cf79261396d9aaf03f459600037566"},e("div",{key:"331f0558ef3eddf5a9b4332f7ec45c58b52dd8c3",class:"mrd-layout-section"},this.items.map((r=>this.renderItem(r)))),this.renderImageModal())}get el(){return this}static get watchers(){return{data:[{dataChanged:0}]}}static get style(){return".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{display:inline-flex;align-items:center;gap:var(--mrd-space-1);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-align:left}.mrd-layout-section__download-link.sc-mrd-layout-section:hover{text-decoration:underline;color:var(--mrd-color-primary-dark)}.mrd-layout-section__file-icon.sc-mrd-layout-section{flex-shrink:0;width:1rem;height:1rem}.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;max-height:calc(10 * 1.5 * var(--mrd-font-size-xs));overflow-x:auto;overflow-y: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-wrap.sc-mrd-layout-section{position:relative}.mrd-layout-section__search-icon.sc-mrd-layout-section{position:absolute;left:var(--mrd-input-padding-x);top:50%;transform:translateY(-50%);width:1rem;height:1rem;color:var(--mrd-color-neutral-400);pointer-events:none}.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) var(--mrd-input-padding-y) calc(var(--mrd-input-padding-x) + 1rem + var(--mrd-space-2));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}"}},[2,"mrd-layout-section",{items:[16],data:[16],views:[16],links:[16],locale:[1],searchQueryMap:[32],searchResultsMap:[32],imagePreviewUrl:[32],imagePreviews:[32],setSearchResults:[64],setViewPage:[64],setViewAggregations:[64],setImagePreview:[64],openImagePreview:[64]},void 0,{data:[{dataChanged:0}]}]),u=m,v=function(){"undefined"!=typeof customElements&&["mrd-layout-section","mrd-table"].forEach((r=>{switch(r){case"mrd-layout-section":customElements.get(i(r))||customElements.define(i(r),m);break;case"mrd-table":customElements.get(i(r))||d()}}))};export{u as MrdLayoutSection,v as defineCustomElement}
+import{proxyCustomElement as r,HTMLElement as t,createEvent as o,h as e,Host as a,transformTag as i}from"@stencil/core/internal/client";import{a as s,b as l}from"./client-layout.js";import{C as n,d}from"./mrd-table2.js";import{t as c}from"./i18n.js";const m=r(class extends t{constructor(r){super(),!1!==r&&this.__registerHost(),this.mrdNavigate=o(this,"mrdNavigate",7),this.mrdSearch=o(this,"mrdSearch",7),this.mrdDownload=o(this,"mrdDownload",7),this.mrdLoadViewPage=o(this,"mrdLoadViewPage",7),this.mrdLoadImage=o(this,"mrdLoadImage",7),this.mrdViewAction=o(this,"mrdViewAction",7),this.mrdLoadViewAggregations=o(this,"mrdLoadViewAggregations",7),this.items=[],this.data={},this.views={},this.links={},this.locale=navigator.language,this.searchQueryMap={},this.searchResultsMap={},this.imagePreviewUrl=null,this.imagePreviews={},this.searchTimers={},this.handleViewLoadPage=(r,t)=>{r.stopPropagation(),this.mrdLoadViewPage.emit({name:t,page:r.detail.page,sort:r.detail.sort,path:r.detail.path,qs:r.detail.qs})},this.handleSearchInput=(r,t)=>{this.searchQueryMap=Object.assign(Object.assign({},this.searchQueryMap),{[r]:t}),this.searchTimers[r]&&clearTimeout(this.searchTimers[r]),t.length<2?this.searchResultsMap=Object.assign(Object.assign({},this.searchResultsMap),{[r]:[]}):this.searchTimers[r]=setTimeout((()=>{this.mrdSearch.emit({query:t,dataClass:r})}),300)}}componentDidLoad(){setTimeout((()=>{this.initEmbeddedTables(),this.emitLoadImages()}),0)}dataChanged(r){r&&Object.keys(r).length>0&&setTimeout((()=>this.initEmbeddedTables()),0)}async initEmbeddedTables(){const r=this.el.querySelectorAll("mrd-table[data-view]");for(const t of Array.from(r))"function"==typeof t.init&&await t.init()}viewKeyFor(r){var t,o,e,a;return r.type===s.RELATED_VIEW?null!==(o=null!==(t=r.relatedClass)&&void 0!==t?t:r.name)&&void 0!==o?o:"":null!==(a=null!==(e=r.dataClass)&&void 0!==e?e:r.name)&&void 0!==a?a:""}emitLoadImages(){for(const r of this.flattenItems(this.items))if(r.type===s.FIELD&&r.dataType===l.IMAGE){const t=r.name,o=this.data[t],e=null==o?void 0:o.href;e&&this.mrdLoadImage.emit({fieldName:t,href:e})}}flattenItems(r){const t=[];for(const o of r)t.push(o),o.items&&t.push(...this.flattenItems(o.items));return t}async setSearchResults(r,t){const o=null!=t?t:this.resolveSearchKey();o&&(this.searchResultsMap=Object.assign(Object.assign({},this.searchResultsMap),{[o]:r}))}async setViewPage(r,t,o,e,a){const i=this.el.querySelector(`mrd-table[data-view="${r}"]`);i&&(void 0!==e&&(i.totalElements=e),await i.setPage(t,o,a))}async setViewAggregations(r,t){const o=this.el.querySelector(`mrd-table[data-view="${r}"]`);o&&await o.setAggregations(t)}async setImagePreview(r,t){this.imagePreviews=Object.assign(Object.assign({},this.imagePreviews),{[r]:t})}async openImagePreview(r){this.imagePreviewUrl=r}resolveSearchKey(){var r;const t=this.flattenItems(this.items).filter((r=>r.type===s.SEARCH));return 1===t.length&&null!==(r=t[0].dataClass)&&void 0!==r?r:null}renderSingleFieldValue(r,t){var o,a,i,s,d,m,u,v,h,y;const p=r.dataType;switch(p){case l.HYPERLINK:{const r=null!==(o=null==t?void 0:t.href)&&void 0!==o?o:t+"",s=null!==(i=null!==(a=null==t?void 0:t.text)&&void 0!==a?a:null==t?void 0:t.label)&&void 0!==i?i:r;return e("a",{class:"mrd-layout-section__link",href:r,target:"_blank",rel:"noopener noreferrer"},s)}case l.TEXTBLOCK:return e("span",{innerHTML:t+""});case l.LONGTEXT:return e("pre",{class:"mrd-layout-section__pre"},t+"");case l.JSON:return e("pre",{class:"mrd-layout-section__pre",innerHTML:n.formatJson(t)});case l.FILE:{const r=null!==(s=null==t?void 0:t.fileName)&&void 0!==s?s:t+"",o=null!==(d=null==t?void 0:t.href)&&void 0!==d?d:"";return e("button",{class:"mrd-layout-section__download-link",onClick:()=>o&&this.mrdDownload.emit({href:o,fileName:r})},e("svg",{class:"mrd-layout-section__file-icon",viewBox:"0 0 24 24","aria-hidden":"true"},e("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"})),c("download",this.locale))}case l.IMAGE:{const o=null!==(m=null==t?void 0:t.href)&&void 0!==m?m:"",a=null!==(u=null==t?void 0:t.fileName)&&void 0!==u?u:"",i=this.imagePreviews[r.name];return i?e("button",{class:"mrd-layout-section__image-thumb-btn",onClick:()=>{this.imagePreviewUrl=i},title:a||void 0},e("img",{class:"mrd-layout-section__image-thumb",src:i,alt:a})):e("button",{class:"mrd-layout-section__download-link",onClick:()=>o&&this.mrdDownload.emit({href:o,fileName:a})},e("svg",{class:"mrd-layout-section__file-icon",viewBox:"0 0 24 24","aria-hidden":"true"},e("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"})),a||o)}case l.BOOLEAN:return e("span",{class:"mrd-layout-section__boolean mrd-layout-section__boolean--"+(t?"true":"false")},c(t?"yes":"no",this.locale));case l.LIST:{const o=(null!==(v=r.listItems)&&void 0!==v?v:[]).find((r=>r.key===t+"")),a=null!==(h=null==o?void 0:o.label)&&void 0!==h?h:t+"",i=null==o?void 0:o.color,s=null==o?void 0:o.backgroundColor;return i&&s?e("span",{class:"mrd-layout-section__badge",style:{color:i,backgroundColor:s}},a):i?e("span",{class:"mrd-layout-section__badge-dot-row"},e("span",{class:"mrd-layout-section__badge-dot",style:{backgroundColor:i}}),a):a}default:return n.renderValue(p,t,null!==(y=r.listItems)&&void 0!==y?y:[],this.locale)||null}}renderFieldValue(r,t){if(null==t||""===t)return null;if(r.multiple&&Array.isArray(t)){const o=t.map((t=>this.renderSingleFieldValue(r,t)));return o.every((r=>"string"==typeof r||null==r))?o.filter(Boolean).join(", ")||null:e("span",null,o.map(((r,t)=>e("span",{key:t+""},r,t<o.length-1?", ":""))))}return this.renderSingleFieldValue(r,t)}renderField(r){if(!r.name)return null;const t=this.data[r.name],o=this.renderFieldValue(r,t);return r.header?e("h1",{class:"mrd-layout-section__field-header",key:r.name},"string"==typeof o?o:null!=t?t+"":r.label):null==o?null:e("div",{class:"mrd-layout-section__field"+(r.dataType===l.TEXTBLOCK||r.dataType===l.LONGTEXT||r.dataType===l.JSON?" mrd-layout-section__field--block":""),key:r.name},e("span",{class:"mrd-layout-section__field-label"},r.label),e("span",{class:"mrd-layout-section__field-value"},o))}renderRelation(r){var t,o,a;if(!r.name)return null;const i=(null!==(o=null===(t=this.data)||void 0===t?void 0:t._links)&&void 0!==o?o:{})[r.name];if(!i)return null;const s=(r,t)=>e("button",{key:r,class:"mrd-layout-section__relation-link",onClick:()=>this.mrdNavigate.emit({href:r,label:t})},t);let l;return(null===(a=i.values)||void 0===a?void 0:a.length)?l=i.values.map((r=>s(r.href,r.name))):i.name&&(l=s(i.href,i.name)),l?e("div",{class:"mrd-layout-section__field",key:r.name},e("span",{class:"mrd-layout-section__field-label"},r.label),e("span",{class:"mrd-layout-section__field-value"},l)):null}renderSearch(r){var t,o,a;if(!r.dataClass)return null;const i=r.dataClass,s=null!==(t=this.searchQueryMap[i])&&void 0!==t?t:"",l=null!==(o=this.searchResultsMap[i])&&void 0!==o?o:[];return e("div",{class:"mrd-layout-section__search",key:"search-"+i},e("div",{class:"mrd-layout-section__search-wrap"},e("svg",{class:"mrd-layout-section__search-icon",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor","aria-hidden":"true"},e("path",{"fill-rule":"evenodd",d:"M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z","clip-rule":"evenodd"})),e("input",{class:"mrd-layout-section__search-input",type:"text",value:s,placeholder:null!==(a=r.label)&&void 0!==a?a:"",onInput:r=>this.handleSearchInput(i,r.target.value)})),l.length>0&&e("ul",{class:"mrd-layout-section__search-results"},l.map((r=>e("li",{key:r.id,class:"mrd-layout-section__search-result"},e("button",{class:"mrd-layout-section__search-result-btn",onClick:()=>this.mrdNavigate.emit({href:r.id,label:r.label})},e("span",{class:"mrd-layout-section__search-result-label"},r.label),r.description&&e("span",{class:"mrd-layout-section__search-result-desc"},r.description)))))))}renderRelatedView(r){var t,o,a,i,s,l;const n=this.viewKeyFor(r);if(!n)return null;if(!r.view)return null;const d=null!==(t=r.showTitle)&&void 0!==t&&t,c=null!==(l=(null!==(s=null===(i=null===(a=null===(o=this.data)||void 0===o?void 0:o._links)||void 0===a?void 0:a.self)||void 0===i?void 0:i.href)&&void 0!==s?s:"").split("/").filter(Boolean).pop())&&void 0!==l?l:"";return e("div",{class:"mrd-layout-section__related-view",key:"view-"+n},d&&r.label&&e("h3",{class:"mrd-layout-section__related-view-title"},r.label),e("mrd-table",{"data-view":n,item:r,parentId:c,locale:this.locale,onMrdLoadPage:r=>this.handleViewLoadPage(r,n),onMrdLoadAggregations:t=>{var o;t.stopPropagation(),this.mrdLoadViewAggregations.emit(Object.assign({name:n,dataClass:null!==(o=r.dataClass)&&void 0!==o?o:n},t.detail))},onMrdRowClick:r=>{var t,o,e;r.stopPropagation();const a=r.detail;this.mrdNavigate.emit({href:null===(o=null===(t=null==a?void 0:a._links)||void 0===t?void 0:t.self)||void 0===o?void 0:o.href,label:null!==(e=null==a?void 0:a.name)&&void 0!==e?e:""})},onMrdAction:t=>{var o;t.stopPropagation(),this.mrdViewAction.emit({name:n,action:t.detail.action,dataClass:null!==(o=r.dataClass)&&void 0!==o?o:n,path:t.detail.path,qs:t.detail.qs,parentPath:t.detail.parentPath})}}))}renderItem(r){var t,o;switch(r.type){case s.FIELD:return this.renderField(r);case s.RELATION:return this.renderRelation(r);case s.HEADER:return e("h2",{class:"mrd-layout-section__header",key:"header-"+r.label},r.label);case s.TEXT:return e("div",{class:"mrd-layout-section__text",key:"text-"+r.label,innerHTML:null!==(t=r.label)&&void 0!==t?t:""});case s.NAVIGATE:return e("button",{class:"mrd-layout-section__navigate",key:"nav-"+r.label,onClick:()=>{var t,o,e;return this.mrdNavigate.emit({label:null!==(t=r.label)&&void 0!==t?t:"",navigate:null!==(o=r.navigate)&&void 0!==o?o:{dataClass:null!==(e=r.dataClass)&&void 0!==e?e:"",icon:r.icon,navigationType:r.navigationType}})}},r.label);case s.SEARCH:return this.renderSearch(r);case s.SECTION:case s.GROUP:return e("div",{class:"mrd-layout-section__group",key:"group-"+r.label},r.label&&e("h3",{class:"mrd-layout-section__group-title"},r.label),(null!==(o=r.items)&&void 0!==o?o:[]).map((r=>this.renderItem(r))));case s.RELATED_VIEW:case s.VIEW:return this.renderRelatedView(r);default:return null}}renderImageModal(){return this.imagePreviewUrl?e("div",{class:"mrd-layout-section__modal-backdrop",onClick:()=>{this.imagePreviewUrl=null}},e("div",{class:"mrd-layout-section__modal",onClick:r=>r.stopPropagation()},e("button",{class:"mrd-layout-section__modal-close",onClick:()=>{this.imagePreviewUrl=null}},"✕"),e("img",{class:"mrd-layout-section__modal-image",src:this.imagePreviewUrl,alt:""}))):null}render(){return e(a,{key:"0a3a58f5c80716bc0a7ba1b9468b721706d2ce4a"},e("div",{key:"7cf63580c584811c1bb84b419e8d13026e432fba",class:"mrd-layout-section"},this.items.map((r=>this.renderItem(r)))),this.renderImageModal())}get el(){return this}static get watchers(){return{data:[{dataChanged:0}]}}static get style(){return".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{display:inline-flex;align-items:center;gap:var(--mrd-space-1);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-align:left}.mrd-layout-section__download-link.sc-mrd-layout-section:hover{text-decoration:underline;color:var(--mrd-color-primary-dark)}.mrd-layout-section__file-icon.sc-mrd-layout-section{flex-shrink:0;width:1rem;height:1rem}.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;max-height:calc(10 * 1.5 * var(--mrd-font-size-xs));overflow-x:auto;overflow-y: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-wrap.sc-mrd-layout-section{position:relative}.mrd-layout-section__search-icon.sc-mrd-layout-section{position:absolute;left:var(--mrd-input-padding-x);top:50%;transform:translateY(-50%);width:1rem;height:1rem;color:var(--mrd-color-neutral-400);pointer-events:none}.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) var(--mrd-input-padding-y) calc(var(--mrd-input-padding-x) + 1rem + var(--mrd-space-2));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}"}},[2,"mrd-layout-section",{items:[16],data:[16],views:[16],links:[16],locale:[1],searchQueryMap:[32],searchResultsMap:[32],imagePreviewUrl:[32],imagePreviews:[32],setSearchResults:[64],setViewPage:[64],setViewAggregations:[64],setImagePreview:[64],openImagePreview:[64]},void 0,{data:[{dataChanged:0}]}]),u=m,v=function(){"undefined"!=typeof customElements&&["mrd-layout-section","mrd-table"].forEach((r=>{switch(r){case"mrd-layout-section":customElements.get(i(r))||customElements.define(i(r),m);break;case"mrd-table":customElements.get(i(r))||d()}}))};export{u as MrdLayoutSection,v as defineCustomElement}