@mmlogic/components 0.1.24 → 0.1.25

package/dist/collection/components/mrd-layout-section/mrd-layout-section.scss

@@ -0,0 +1,339 @@
+.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 {
+  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 {
+  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 {
+  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 {
+  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 {
+  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 {
+  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 {
+  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:hover {
+  background-color: var(--mrd-color-primary-light);
+  border-color: var(--mrd-color-primary);
+}
+
+.mrd-layout-section__link {
+  color: var(--mrd-color-primary);
+  text-decoration: none;
+}
+
+.mrd-layout-section__link:hover {
+  text-decoration: underline;
+}
+
+.mrd-layout-section__relation-link {
+  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:hover {
+  text-decoration: underline;
+}
+
+.mrd-layout-section__download-link {
+  background: none;
+  border: none;
+  padding: 0;
+  font-family: var(--mrd-font-family);
+  font-size: var(--mrd-font-size-sm);
+  color: var(--mrd-color-primary);
+  cursor: pointer;
+  text-decoration: underline;
+  text-align: left;
+}
+
+.mrd-layout-section__boolean--true {
+  color: var(--mrd-color-success);
+  font-weight: var(--mrd-font-weight-semibold);
+}
+
+.mrd-layout-section__boolean--false {
+  color: var(--mrd-color-neutral-400);
+}
+
+.mrd-layout-section__field--block {
+  grid-template-columns: 1fr;
+}
+
+.mrd-layout-section__badge {
+  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 {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--mrd-space-2);
+}
+
+.mrd-layout-section__badge-dot {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.mrd-layout-section__pre {
+  font-family: var(--mrd-font-family-mono);
+  font-size: var(--mrd-font-size-xs);
+  background-color: var(--mrd-color-neutral-50);
+  border: 1px solid var(--mrd-color-neutral-200);
+  border-radius: var(--mrd-border-radius);
+  padding: var(--mrd-space-3);
+  margin: 0;
+  overflow-x: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.mrd-layout-section__group {
+  margin: var(--mrd-space-4) 0;
+}
+
+.mrd-layout-section__group-title {
+  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 {
+  margin: var(--mrd-space-4) 0;
+}
+
+.mrd-layout-section__related-view-title {
+  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 {
+  position: relative;
+  margin: var(--mrd-space-2) 0;
+}
+
+.mrd-layout-section__search-input {
+  display: block;
+  width: 100%;
+  height: var(--mrd-input-height);
+  padding: var(--mrd-input-padding-y) var(--mrd-input-padding-x);
+  font-family: var(--mrd-font-family);
+  font-size: var(--mrd-font-size-base);
+  color: var(--mrd-input-color);
+  background-color: var(--mrd-input-bg);
+  border: var(--mrd-border-width) solid var(--mrd-border-color);
+  border-radius: var(--mrd-border-radius);
+  outline: none;
+  appearance: none;
+  box-sizing: border-box;
+}
+
+.mrd-layout-section__search-input:focus {
+  border-color: var(--mrd-border-color-focus);
+  box-shadow: var(--mrd-shadow-focus);
+}
+
+.mrd-layout-section__search-input::placeholder {
+  color: var(--mrd-input-placeholder-color);
+}
+
+.mrd-layout-section__search-results {
+  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 {
+  margin: 0;
+  padding: 0;
+}
+
+.mrd-layout-section__search-result-btn {
+  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:hover {
+  background-color: var(--mrd-color-primary-light);
+}
+
+.mrd-layout-section__search-result-label {
+  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 {
+  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 {
+  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:hover .mrd-layout-section__image-thumb {
+  opacity: 0.85;
+}
+
+.mrd-layout-section__image-thumb {
+  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 {
+  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 {
+  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 {
+  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:hover {
+  background: rgba(0, 0, 0, 0.8);
+}
+
+.mrd-layout-section__modal-image {
+  display: block;
+  max-width: 100%;
+  max-height: calc(90vh - 2rem);
+  border-radius: var(--mrd-border-radius);
+  object-fit: contain;
+}

package/dist/collection/components/mrd-longtext-field/mrd-longtext-field.js

@@ -28,7 +28,7 @@ export class MrdLongtextField {
     }
     render() {
         const hasError = !!this.error;
-        return (h(Host, { key: '0b1764adfb7ddce8c5e645a5d96c69c715652365' }, h("div", { key: '3c0c6bf77bfcd3f1bc97103baf9e5f6588f541f2', class: "mrd-longtext-field" }, this.label && (h("label", { key: 'f096b24c785a8c4b473fe0491a8cfdd7da4770bc', class: `mrd-longtext-field__label${this.required ? ' mrd-longtext-field__label--required' : ''}` }, this.label)), this.disabled ? (h("pre", { class: "mrd-longtext-field__content" }, this.value)) : (h("textarea", { class: `mrd-longtext-field__input${hasError ? ' mrd-longtext-field__input--error' : ''}`, name: this.name, placeholder: this.placeholder, required: this.required, rows: 10, onInput: this.handleInput, onBlur: this.handleBlur }, this.value)), hasError && h("span", { key: '74b6bcecf81ca86172015abd5e3512ad288ae88e', class: "mrd-longtext-field__error" }, this.error))));
+        return (h(Host, { key: '3142f97e26fdef5547c8dd9d236ed8bc40d5c65f' }, h("div", { key: 'b78567596d8c6459c8e9b28ea6b02d3fe65fd16c', class: "mrd-longtext-field" }, this.label && (h("label", { key: 'e85d8657fcc49fc7e15c06b8a98b34c03738ef5b', class: `mrd-longtext-field__label${this.required ? ' mrd-longtext-field__label--required' : ''}` }, this.label)), this.disabled ? (h("pre", { class: "mrd-longtext-field__content" }, this.value)) : (h("textarea", { class: `mrd-longtext-field__input${hasError ? ' mrd-longtext-field__input--error' : ''}`, name: this.name, placeholder: this.placeholder, required: this.required, rows: 10, onInput: this.handleInput, onBlur: this.handleBlur }, this.value)), hasError && h("span", { key: '63cdcaf136e345197c42516f150752ec1d8665fa', class: "mrd-longtext-field__error" }, this.error))));
     }
     static get is() { return "mrd-longtext-field"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/mrd-number-field/mrd-number-field.js

@@ -69,7 +69,7 @@ export class MrdNumberField {
         const hasError = !!this.error;
         const suffix = this.dataType === ClientLayoutItemFieldDataType.PERCENTAGE ? '%' :
             this.dataType === ClientLayoutItemFieldDataType.DECIMAL ? '' : '';
-        return (h(Host, { key: '676e773fd4cc22936e64626b16e58c76f74ad8a7' }, h("div", { key: 'c646eab29793326f439d9838ecdab68249c487f1', class: "mrd-number-field" }, this.label && (h("label", { key: 'fb4fdac8f71b513fed52262ed8f5b5a5258f8f0b', class: `mrd-number-field__label${this.required ? ' mrd-number-field__label--required' : ''}` }, this.label)), h("div", { key: '5f7540318761da01f9793430ca709ba014204a11', class: "mrd-number-field__input-wrapper" }, h("input", { key: 'a102a89f9b7d91b29cf65afd5772552002d4c4cc', class: `mrd-number-field__input${hasError ? ' mrd-number-field__input--error' : ''}`, type: "text", inputMode: "decimal", name: this.name, value: this.displayValue, placeholder: this.placeholder || (suffix ? `0${suffix}` : '0'), required: this.required, disabled: this.disabled, onInput: this.handleInput, onBlur: this.handleBlur, onFocus: this.handleFocus })), hasError && h("span", { key: 'eb00631f61d2c9ee6a94343a0c79847a21e8316c', class: "mrd-number-field__error" }, this.error))));
+        return (h(Host, { key: 'ba3488fb12f72bb04164e3e94c028fb8a085f1f2' }, h("div", { key: '582e30a2a256c16cc3b0cab6e64460a0a5ec1fa2', class: "mrd-number-field" }, this.label && (h("label", { key: '87fe77ce80e888406ecedaa450e8c3d2a61c790a', class: `mrd-number-field__label${this.required ? ' mrd-number-field__label--required' : ''}` }, this.label)), h("div", { key: 'e3d8cf06f585add372e385d6e6ef7d60ece8071b', class: "mrd-number-field__input-wrapper" }, h("input", { key: '04710b67ee0dcb9db327e25b2467b1b3499bc9a8', class: `mrd-number-field__input${hasError ? ' mrd-number-field__input--error' : ''}`, type: "text", inputMode: "decimal", name: this.name, value: this.displayValue, placeholder: this.placeholder || (suffix ? `0${suffix}` : '0'), required: this.required, disabled: this.disabled, onInput: this.handleInput, onBlur: this.handleBlur, onFocus: this.handleFocus })), hasError && h("span", { key: '9713244d784c82213ea835a5a6d47d468ccb0bb9', class: "mrd-number-field__error" }, this.error))));
     }
     static get is() { return "mrd-number-field"; }
     static get encapsulation() { return "scoped"; }

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

@@ -12,6 +12,8 @@ const TEXT_TYPES = new Set(['TEXT', 'TEXTBLOCK', 'EMAIL', 'HYPERLINK']);
 const NUMERIC_TYPES = new Set(['INTEGER', 'DECIMAL', 'PERCENTAGE', 'CURRENCY']);
 const DATE_TYPES = new Set(['DATE', 'DATETIME', 'TIME']);
 const NO_FILTER_TYPES = new Set(['FILE', 'IMAGE']);
+/** Column types that cannot be sorted or filtered (not stored in PostgreSQL). */
+const NON_INTERACTIVE_TYPES = new Set(['LONGTEXT', 'JSON']);
 export class MrdTable {
     constructor() {
         // ── Non-state internals ────────────────────────────────────────────────────
@@ -64,6 +66,8 @@ export class MrdTable {
         this.scrollTop = 0;
         /** Full text shown in the TEXTBLOCK expand modal (null = closed). */
         this.textblockModal = null;
+        /** Syntax-highlighted JSON HTML shown in the JSON expand modal (null = closed). */
+        this.jsonModal = null;
         /** Aggregation totals received from the host via setAggregations(). Null = not yet loaded. */
         this.aggregations = null;
         /** Whether the view switcher dropdown is open. */
@@ -401,6 +405,23 @@ export class MrdTable {
             this.keydownHandler = null;
         }
     }
+    openJsonModal(html) {
+        this.jsonModal = html;
+        if (this.keydownHandler)
+            document.removeEventListener('keydown', this.keydownHandler);
+        this.keydownHandler = (ev) => {
+            if (ev.key === 'Escape')
+                this.closeJsonModal();
+        };
+        document.addEventListener('keydown', this.keydownHandler);
+    }
+    closeJsonModal() {
+        this.jsonModal = null;
+        if (this.keydownHandler) {
+            document.removeEventListener('keydown', this.keydownHandler);
+            this.keydownHandler = null;
+        }
+    }
     setPending(key, val) {
         this.pendingFilter = Object.assign(Object.assign({}, this.pendingFilter), { [key]: val });
     }
@@ -680,7 +701,7 @@ export class MrdTable {
     }
     // ── Render: cell ──────────────────────────────────────────────────────────
     renderCell(col, row) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e, _f;
         const numericTypes = new Set(['INTEGER', 'DECIMAL', 'PERCENTAGE', 'CURRENCY']);
         const dataType = (_b = (_a = col.field) === null || _a === void 0 ? void 0 : _a.dataType) !== null && _b !== void 0 ? _b : '';
         const isNumeric = col.type === 'FIELD' && numericTypes.has(dataType);
@@ -695,6 +716,15 @@ export class MrdTable {
                     this.mrdDownload.emit({ href, fileName });
                 } }, h("svg", { class: "mrd-table__file-icon", viewBox: "0 0 24 24", "aria-hidden": "true" }, h("path", { fill: "currentColor", d: "M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm-1 7V3.5L18.5 9H13zm-3 8l-3-3 1.41-1.41L10 14.17l4.59-4.58L16 11l-6 6z" })), t('download', this.locale))) : ''));
         }
+        if (dataType === 'JSON') {
+            const name = (_f = (_e = col.field) === null || _e === void 0 ? void 0 : _e.name) !== null && _f !== void 0 ? _f : '';
+            const rawValue = name ? row === null || row === void 0 ? void 0 : row[name] : undefined;
+            if (rawValue == null || rawValue === '')
+                return h("td", { class: "mrd-table__cell" });
+            const compactHtml = CellRenderer.formatJson(rawValue, true);
+            const prettyHtml = CellRenderer.formatJson(rawValue, false);
+            return (h("td", { class: "mrd-table__cell" }, h("span", { class: "mrd-table__json-preview", innerHTML: compactHtml }), h("button", { class: "mrd-table__textblock-btn", onClick: (e) => { e.stopPropagation(); this.openJsonModal(prettyHtml); }, "aria-label": t('textblock_show_more', this.locale) }, "\u22EF")));
+        }
         const TEXTBLOCK_MAX = 200;
         if (dataType === 'TEXTBLOCK') {
             const full = CellRenderer.render(col, row, this.locale);
@@ -737,7 +767,7 @@ export class MrdTable {
                     this.filterMode ? 'mrd-table__header--sortable' : '',
                 ].filter(Boolean).join(' ');
                 return (h("th", { class: cls, onClick: this.filterMode ? (e) => this.handleFilterOpen(col, e) : undefined }, h("span", { class: "mrd-table__header-label" }, (_d = (_b = (_a = col.field) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : (_c = col.relation) === null || _c === void 0 ? void 0 : _c.label) !== null && _d !== void 0 ? _d : ''), isFiltered && this.renderFilterIcon()));
-            }))), h("tbody", null, (_b = this.rows) === null || _b === void 0 ? void 0 : _b.map((row, i) => (h("tr", { class: "mrd-table__row mrd-table__row--clickable", style: { background: i % 2 === 0 ? '' : 'var(--mrd-color-neutral-100)' }, onClick: () => this.mrdRowClick.emit(row) }, this.columns.map(col => this.renderCell(col, row)))))), this.renderTotalsRow()), (!this.rows || this.rows.length === 0) && (h("p", { class: "mrd-table__empty" }, t('no_results', this.locale)))), this.renderFooter((_c = this.rows) === null || _c === void 0 ? void 0 : _c.length), this.renderFilterPopup(), this.renderTextblockModal()));
+            }))), h("tbody", null, (_b = this.rows) === null || _b === void 0 ? void 0 : _b.map((row, i) => (h("tr", { class: "mrd-table__row mrd-table__row--clickable", style: { background: i % 2 === 0 ? '' : 'var(--mrd-color-neutral-100)' }, onClick: () => this.mrdRowClick.emit(row) }, this.columns.map(col => this.renderCell(col, row)))))), this.renderTotalsRow()), (!this.rows || this.rows.length === 0) && (h("p", { class: "mrd-table__empty" }, t('no_results', this.locale)))), this.renderFooter((_c = this.rows) === null || _c === void 0 ? void 0 : _c.length), this.renderFilterPopup(), this.renderTextblockModal(), this.renderJsonModal()));
         }
         // ── Paginated / virtual-scroll mode ────────────────────────────────────
         // Derive the authoritative row count from loaded pages:
@@ -773,13 +803,14 @@ export class MrdTable {
             const name = this.colName(col);
             const isActive = this.sortField === name;
             const isFiltered = this.activeFilters.has(name);
+            const isInteractive = !NON_INTERACTIVE_TYPES.has(this.colDataType(col));
             const cls = [
                 'mrd-table__header',
-                'mrd-table__header--sortable',
+                isInteractive ? 'mrd-table__header--sortable' : '',
                 isActive ? `mrd-table__header--sorted-${this.sortDir}` : '',
                 isFiltered ? 'mrd-table__header--filtered' : '',
             ].filter(Boolean).join(' ');
-            return (h("th", { class: cls, style: this.colWidths[idx] ? { width: `${this.colWidths[idx]}px` } : undefined, onClick: (e) => this.filterMode ? this.handleFilterOpen(col, e) : this.handleSortClick(col) }, h("span", { class: "mrd-table__header-label" }, (_d = (_b = (_a = col.field) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : (_c = col.relation) === null || _c === void 0 ? void 0 : _c.label) !== null && _d !== void 0 ? _d : ''), isActive && (h("span", { class: "mrd-table__sort-icon", "aria-hidden": "true" }, this.sortDir === 'asc' ? '▲' : '▼')), !isActive && !this.filterMode && (h("span", { class: "mrd-table__sort-icon", "aria-hidden": "true" }, "\u21C5")), isFiltered && this.renderFilterIcon()));
+            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" }, (_d = (_b = (_a = col.field) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : (_c = col.relation) === null || _c === void 0 ? void 0 : _c.label) !== null && _d !== void 0 ? _d : ''), isInteractive && isActive && (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()));
     }
     renderFilterIcon() {
@@ -790,6 +821,11 @@ export class MrdTable {
             return null;
         return (h("div", { class: "mrd-table__modal-backdrop", onClick: () => this.closeTextblockModal(), role: "dialog", "aria-modal": "true" }, h("div", { class: "mrd-table__modal", onClick: (e) => e.stopPropagation() }, h("button", { class: "mrd-table__modal-close", onClick: () => this.closeTextblockModal(), "aria-label": t('close', this.locale) }, "\u2715"), h("p", { class: "mrd-table__modal-text" }, this.textblockModal))));
     }
+    renderJsonModal() {
+        if (this.jsonModal === null)
+            return null;
+        return (h("div", { class: "mrd-table__modal-backdrop", onClick: () => this.closeJsonModal(), role: "dialog", "aria-modal": "true" }, h("div", { class: "mrd-table__modal", onClick: (e) => e.stopPropagation() }, h("button", { class: "mrd-table__modal-close", onClick: () => this.closeJsonModal(), "aria-label": t('close', this.locale) }, "\u2715"), h("pre", { class: "mrd-table__modal-json", innerHTML: this.jsonModal }))));
+    }
     static get is() { return "mrd-table"; }
     static get encapsulation() { return "scoped"; }
     static get originalStyleUrls() {
@@ -1060,6 +1096,7 @@ export class MrdTable {
             "popupPos": {},
             "scrollTop": {},
             "textblockModal": {},
+            "jsonModal": {},
             "aggregations": {},
             "viewSwitcherOpen": {}
         };

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

@@ -746,3 +746,26 @@
   line-height: 1.6;
 }
 
+.mrd-table__json-preview {
+  font-family: var(--mrd-font-family-mono);
+  font-size: var(--mrd-font-size-xs);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: inline-block;
+  max-width: calc(100% - 1.5rem);
+  vertical-align: middle;
+}
+
+.mrd-table__modal-json {
+  margin: 0;
+  padding-right: var(--mrd-space-6);
+  font-family: var(--mrd-font-family-mono);
+  font-size: var(--mrd-font-size-xs);
+  white-space: pre-wrap;
+  word-break: break-word;
+  line-height: 1.6;
+  background: none;
+  border: none;
+}
+

package/dist/collection/components/mrd-text-field/mrd-text-field.js

@@ -28,7 +28,7 @@ export class MrdTextField {
     }
     render() {
         const hasError = !!this.error;
-        return (h(Host, { key: '8909be24f6452fd4f485b209b226edd4a7718d6b' }, h("div", { key: '18680ffdd64384b8725c408360da8f0f288ee6fc', class: "mrd-text-field" }, this.label && (h("label", { key: 'c4d014056181d4a92ca74a505ae48cb2cb81236d', class: `mrd-text-field__label${this.required ? ' mrd-text-field__label--required' : ''}` }, this.label)), h("input", { key: '76f862523928100f1f1089fc747b2964312d77a2', class: `mrd-text-field__input${hasError ? ' mrd-text-field__input--error' : ''}`, type: "text", name: this.name, value: this.value, placeholder: this.placeholder, required: this.required, disabled: this.disabled, onInput: this.handleInput, onBlur: this.handleBlur }), hasError && h("span", { key: 'd0a1e04caea7a2d5058bc753e0885f25db302575', class: "mrd-text-field__error" }, this.error))));
+        return (h(Host, { key: 'b1ea3dce848a4ad41b60599804c69a35ccd35570' }, h("div", { key: '2e327824843fe02c5851beae96d52f9eb9ee67ce', class: "mrd-text-field" }, this.label && (h("label", { key: '99026834b30a53d7cf715c59099895211ff6ddb7', class: `mrd-text-field__label${this.required ? ' mrd-text-field__label--required' : ''}` }, this.label)), h("input", { key: '0e56c9115b2016ad3cb3ce8e734297354c70c7e2', class: `mrd-text-field__input${hasError ? ' mrd-text-field__input--error' : ''}`, type: "text", name: this.name, value: this.value, placeholder: this.placeholder, required: this.required, disabled: this.disabled, onInput: this.handleInput, onBlur: this.handleBlur }), hasError && h("span", { key: '0430c32b083484747962147e167b11ed7a1597cc', class: "mrd-text-field__error" }, this.error))));
     }
     static get is() { return "mrd-text-field"; }
     static get encapsulation() { return "scoped"; }

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

@@ -66,7 +66,7 @@ export class MrdTextareaField {
         }
     }
     render() {
-        return (h(Host, { key: '41b9f19dc589c26545a11db883c00b7ffe5d1c04' }, h("div", { key: '62b01e407efe1d5b8885e769f62705938f931817', class: "mrd-textarea-field" }, this.label && (h("label", { key: '284e3355dfe15c0aedcb9bafdd829269a0eea93a', class: `mrd-textarea-field__label${this.required ? ' mrd-textarea-field__label--required' : ''}` }, this.label)), h("div", { key: '0dba936a6eba64457f5cc69164d0f0eaf4563698', class: `mrd-textarea-field__container${this.error ? ' mrd-textarea-field__container--error' : ''}` }, h("div", { key: '0c47c25bd86d5002575a1f19848b0b0af2e87982', class: "mrd-textarea-field__editor" })), this.error && h("span", { key: 'e678046a6c27544dd9007a6c66083cce089cb991', class: "mrd-textarea-field__error" }, this.error))));
+        return (h(Host, { key: '7bc05fae8d48c43b56bde892537930552605727a' }, h("div", { key: '3416e9c5fdf6362602715de8427c5d2ccfa52925', class: "mrd-textarea-field" }, this.label && (h("label", { key: 'c6bd35076738b1a700b53092fb0754250c73e085', class: `mrd-textarea-field__label${this.required ? ' mrd-textarea-field__label--required' : ''}` }, this.label)), h("div", { key: 'ed0483a25a62399d1ac8ee14bc59e3eb44b91814', class: `mrd-textarea-field__container${this.error ? ' mrd-textarea-field__container--error' : ''}` }, h("div", { key: 'd17c6997602b81e8b7f66f1e5cfb12b4836cb892', class: "mrd-textarea-field__editor" })), this.error && h("span", { key: '30a068872e73ca78781c9a5e1fac2c9e3ce30765', class: "mrd-textarea-field__error" }, this.error))));
     }
     static get is() { return "mrd-textarea-field"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/mrd-time-field/mrd-time-field.js

@@ -27,7 +27,7 @@ export class MrdTimeField {
     }
     render() {
         const hasError = !!this.error;
-        return (h(Host, { key: 'f5325429315ff23757f2a575b8d317c76e23f579' }, h("div", { key: '2c2a4a49984d61cf62f94f1923d6a2a1e550fb1c', class: "mrd-time-field" }, this.label && (h("label", { key: '3ef4da8ecc8406eacf3e91e188a1ea20f8eb8779', class: `mrd-time-field__label${this.required ? ' mrd-time-field__label--required' : ''}` }, this.label)), h("input", { key: '284527457812d72f5341128d3ba7873f52d5694f', class: `mrd-time-field__input${hasError ? ' mrd-time-field__input--error' : ''}`, type: "time", name: this.name, value: this.value, required: this.required, disabled: this.disabled, onChange: this.handleChange, onBlur: this.handleBlur }), hasError && h("span", { key: '7563dcb10e813c583a0fb29e07f6e7f2340609bf', class: "mrd-time-field__error" }, this.error))));
+        return (h(Host, { key: '6a6828d9c5224ddfcc5d17124523037512f4970c' }, h("div", { key: '468d5295170cefc93b1e2d49b7189c8366d306b7', class: "mrd-time-field" }, this.label && (h("label", { key: '52ea233ea0a7e8563145c326c4ef9d27557b6dc8', class: `mrd-time-field__label${this.required ? ' mrd-time-field__label--required' : ''}` }, this.label)), h("input", { key: 'e9f0f75517638bf4e4ead95bf69530b5c395f8bc', class: `mrd-time-field__input${hasError ? ' mrd-time-field__input--error' : ''}`, type: "time", name: this.name, value: this.value, required: this.required, disabled: this.disabled, onChange: this.handleChange, onBlur: this.handleBlur }), hasError && h("span", { key: '4f734c3373444df4f686a7ae6bde84a2ee39d9f4', class: "mrd-time-field__error" }, this.error))));
     }
     static get is() { return "mrd-time-field"; }
     static get encapsulation() { return "scoped"; }