@mmlogic/components 0.1.24 → 0.1.26

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

@@ -0,0 +1,354 @@
+.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 {
+  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:hover {
+  text-decoration: underline;
+  color: var(--mrd-color-primary-dark);
+}
+
+.mrd-layout-section__file-icon {
+  flex-shrink: 0;
+  width: 1rem;
+  height: 1rem;
+}
+
+.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;
+  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 {
+  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,13 +12,14 @@ 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 ────────────────────────────────────────────────────
         this.pendingPages = new Set();
         this.debounceTimer = null;
         this.outsideClickHandler = null;
-        this.viewSwitcherClickHandler = null;
         this.keydownHandler = null;
         // ── Props ──────────────────────────────────────────────────────────────────
         this.columns = [];
@@ -64,10 +65,10 @@ 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. */
-        this.viewSwitcherOpen = false;
         this.handleScroll = (e) => {
             const scroller = e.currentTarget;
             const scrollTop = scroller.scrollTop;
@@ -150,10 +151,6 @@ export class MrdTable {
             document.removeEventListener('click', this.outsideClickHandler);
             this.outsideClickHandler = null;
         }
-        if (this.viewSwitcherClickHandler) {
-            document.removeEventListener('click', this.viewSwitcherClickHandler);
-            this.viewSwitcherClickHandler = null;
-        }
         if (this.keydownHandler) {
             document.removeEventListener('keydown', this.keydownHandler);
             this.keydownHandler = null;
@@ -401,6 +398,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 });
     }
@@ -525,44 +539,26 @@ export class MrdTable {
         }
     }
     // ── View switcher ──────────────────────────────────────────────────────────
-    openViewSwitcher() {
-        this.viewSwitcherOpen = true;
-        if (this.viewSwitcherClickHandler)
-            document.removeEventListener('click', this.viewSwitcherClickHandler);
-        this.viewSwitcherClickHandler = (ev) => {
-            const wrapper = this.el.querySelector('.mrd-table__view-switcher');
-            if (wrapper && !wrapper.contains(ev.target))
-                this.closeViewSwitcher();
-        };
-        document.addEventListener('click', this.viewSwitcherClickHandler);
-    }
-    closeViewSwitcher() {
-        this.viewSwitcherOpen = false;
-        if (this.viewSwitcherClickHandler) {
-            document.removeEventListener('click', this.viewSwitcherClickHandler);
-            this.viewSwitcherClickHandler = null;
-        }
-    }
     handleViewSwitch(view) {
-        this.closeViewSwitcher();
         this.mrdSwitchView.emit({ name: view.name, class: view.class });
     }
-    renderViewSwitcher() {
-        return (h("div", { class: "mrd-table__view-switcher" }, h("button", { class: `mrd-table__view-switcher-btn${this.viewSwitcherOpen ? ' mrd-table__view-switcher-btn--open' : ''}`, "aria-label": this.viewLabel, onClick: (e) => {
-                e.stopPropagation();
-                this.viewSwitcherOpen ? this.closeViewSwitcher() : this.openViewSwitcher();
-            } }, h("svg", { class: "mrd-table__view-switcher-chevron", viewBox: "0 0 24 24", "aria-hidden": "true" }, h("path", { fill: "currentColor", d: "M7 10l5 5 5-5z" }))), this.viewSwitcherOpen && (h("div", { class: "mrd-table__view-switcher-dropdown", onClick: (e) => e.stopPropagation() }, this.alternativeViews.map(view => {
-            var _a;
-            return (h("button", { class: "mrd-table__view-switcher-item", onClick: () => this.handleViewSwitch(view) }, (_a = view.label) !== null && _a !== void 0 ? _a : view.name));
-        })))));
-    }
     // ── Render: toolbar ────────────────────────────────────────────────────────
     renderToolbar() {
         var _a, _b;
         const filterCount = this.activeFilters.size;
         const hasActions = ((_a = this.actions) === null || _a === void 0 ? void 0 : _a.length) > 0;
         const hasViewSwitcher = !!this.viewLabel && ((_b = this.alternativeViews) === null || _b === void 0 ? void 0 : _b.length) > 0;
-        return (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("span", { class: "mrd-table__view-title" }, this.viewLabel), this.renderViewSwitcher())), hasActions && (h("div", { class: "mrd-table__toolbar-right" }, this.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("select", { class: "mrd-table__view-select", onChange: (e) => {
+                const sel = e.target;
+                const view = this.alternativeViews.find(v => v.name === sel.value);
+                if (view) {
+                    sel.selectedIndex = 0;
+                    this.handleViewSwitch(view);
+                }
+            } }, h("option", { value: "" }, this.viewLabel), this.alternativeViews.map(v => {
+            var _a;
+            return (h("option", { value: v.name }, (_a = v.label) !== null && _a !== void 0 ? _a : v.name));
+        })))), hasActions && (h("div", { class: "mrd-table__toolbar-right" }, this.actions.map(a => {
             var _a;
             return (h("button", { class: `mrd-table__action mrd-table__action--${(_a = a.variant) !== null && _a !== void 0 ? _a : 'secondary'}`, disabled: a.disabled, onClick: () => this.mrdAction.emit({ action: a.action }) }, a.icon
                 ? h("svg", { class: "mrd-table__action-icon", "aria-hidden": "true" }, h("use", { href: a.icon }))
@@ -680,7 +676,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 +691,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 +742,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 +778,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 +796,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,8 +1071,8 @@ export class MrdTable {
             "popupPos": {},
             "scrollTop": {},
             "textblockModal": {},
-            "aggregations": {},
-            "viewSwitcherOpen": {}
+            "jsonModal": {},
+            "aggregations": {}
         };
     }
     static get events() {