@mmlogic/components 0.5.12 → 0.5.14

package/dist/cjs/mrd-merge-view.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index = require('./index-DVbdkYO3.js');
 var clientLayout = require('./client-layout-CqVuJumR.js');
-var cellRenderer = require('./cell-renderer-pwUGEDql.js');
+var cellRenderer = require('./cell-renderer-mjS630f1.js');
 
 /**
  * Whether a layout item can appear in the merge diff at all. m-n relations

package/dist/collection/components/documents/mrd-document-container/mrd-document-container.js

@@ -28,6 +28,10 @@ export class MrdDocumentContainer {
          *  on top, Finder-style. The table manages its own height. */
         this.height = 460;
         this.locale = navigator.language;
+        /** When true, this dashboard is read-only: New folder and Upload are disabled
+         *  (with a tooltip explaining why) and the embedded table/list get it passed
+         *  through so their own create/upload/drag-drop paths are disabled too. */
+        this.readOnly = false;
         /** Active body: folder tree or flat table. */
         this.mode = 'tree';
         /** Whether the folder tree currently has a valid target for "New folder". */
@@ -42,6 +46,8 @@ export class MrdDocumentContainer {
         };
         this.pickFile = () => {
             var _a;
+            if (this.readOnly)
+                return;
             (_a = this.fileInputEl) === null || _a === void 0 ? void 0 : _a.click();
         };
         /** One file per upload, matching the drop handler. Reset the input afterwards
@@ -78,11 +84,11 @@ export class MrdDocumentContainer {
     }
     // ── Toolbar ────────────────────────────────────────────────────────────────
     renderToolbar() {
-        return (h("div", { class: "mrd-document-container__toolbar" }, this.mode === 'tree' && (h("button", { type: "button", class: "mrd-document-container__action", disabled: !this.canCreate, onClick: this.createFolder }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" }), h("path", { d: "M12 11v4M10 13h4" })), t('new_folder', this.locale))), this.mode === 'tree' && (h("button", { type: "button", class: "mrd-document-container__action", disabled: !this.canCreate, title: this.targetLabel ? `${t('doc_upload_to', this.locale)} ${this.targetLabel}` : undefined, onClick: this.pickFile }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }), h("path", { d: "M12 3v13M7 8l5-5 5 5" })), t('doc_upload', this.locale))), h("input", { type: "file", class: "mrd-document-container__file-input", ref: el => (this.fileInputEl = el), onChange: this.onFilePicked }), h("div", { class: "mrd-document-container__seg", role: "group", "aria-label": t('doc_view_switch', this.locale) }, h("button", { class: "mrd-document-container__seg-btn", "aria-pressed": String(this.mode === 'tree'), title: t('doc_view_tree', this.locale), "aria-label": t('doc_view_tree', this.locale), onClick: () => this.setMode('tree') }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M3 5h6M3 12h9M3 19h6" }), h("circle", { cx: "18", cy: "5", r: "1.6" }), h("circle", { cx: "18", cy: "19", r: "1.6" }), h("path", { d: "M16 12h4" }))), h("button", { class: "mrd-document-container__seg-btn", "aria-pressed": String(this.mode === 'list'), title: t('doc_view_list', this.locale), "aria-label": t('doc_view_list', this.locale), onClick: () => this.setMode('list') }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01" }))))));
+        return (h("div", { class: "mrd-document-container__toolbar" }, this.mode === 'tree' && (h("button", { type: "button", class: "mrd-document-container__action", disabled: this.readOnly || !this.canCreate, title: this.readOnly ? t('readonly_access', this.locale) : undefined, onClick: this.createFolder }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" }), h("path", { d: "M12 11v4M10 13h4" })), t('new_folder', this.locale))), this.mode === 'tree' && (h("button", { type: "button", class: "mrd-document-container__action", disabled: this.readOnly || !this.canCreate, title: this.readOnly ? t('readonly_access', this.locale) : (this.targetLabel ? `${t('doc_upload_to', this.locale)} ${this.targetLabel}` : undefined), onClick: this.pickFile }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }), h("path", { d: "M12 3v13M7 8l5-5 5 5" })), t('doc_upload', this.locale))), h("input", { type: "file", class: "mrd-document-container__file-input", ref: el => (this.fileInputEl = el), onChange: this.onFilePicked }), h("div", { class: "mrd-document-container__seg", role: "group", "aria-label": t('doc_view_switch', this.locale) }, h("button", { class: "mrd-document-container__seg-btn", "aria-pressed": String(this.mode === 'tree'), title: t('doc_view_tree', this.locale), "aria-label": t('doc_view_tree', this.locale), onClick: () => this.setMode('tree') }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M3 5h6M3 12h9M3 19h6" }), h("circle", { cx: "18", cy: "5", r: "1.6" }), h("circle", { cx: "18", cy: "19", r: "1.6" }), h("path", { d: "M16 12h4" }))), h("button", { class: "mrd-document-container__seg-btn", "aria-pressed": String(this.mode === 'list'), title: t('doc_view_list', this.locale), "aria-label": t('doc_view_list', this.locale), onClick: () => this.setMode('list') }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01" }))))));
     }
     // ── Bodies ───────────────────────────────────────────────────────────────
     renderTree() {
-        return (h("mrd-document-list", { "data-doclist": this.viewKey, ref: el => (this.listEl = el), item: this.item, archetype: this.archetype, parentId: this.parentId, containerHref: this.containerHref, locale: this.locale, onMrdLoadDistinct: (e) => {
+        return (h("mrd-document-list", { "data-doclist": this.viewKey, ref: el => (this.listEl = el), item: this.item, archetype: this.archetype, parentId: this.parentId, containerHref: this.containerHref, locale: this.locale, readOnly: this.readOnly, onMrdLoadDistinct: (e) => {
                 e.stopPropagation();
                 this.mrdLoadDistinct.emit(e.detail);
             }, onMrdLoadPage: (e) => {
@@ -109,7 +115,7 @@ export class MrdDocumentContainer {
             } }));
     }
     renderList() {
-        return (h("mrd-table", { "data-view": this.viewKey, ref: el => (this.tableEl = el), item: this.item, parentId: this.parentId, locale: this.locale, onMrdLoadPage: (e) => {
+        return (h("mrd-table", { "data-view": this.viewKey, ref: el => (this.tableEl = el), item: this.item, parentId: this.parentId, locale: this.locale, readOnly: this.readOnly, onMrdLoadPage: (e) => {
                 e.stopPropagation();
                 this.mrdLoadPage.emit(e.detail);
             }, onMrdLoadAggregations: (e) => {
@@ -133,7 +139,7 @@ export class MrdDocumentContainer {
     }
     render() {
         const treeMode = this.mode === 'tree';
-        return (h(Host, { key: 'ae948e2458d9087179e850b527802c489067d93f' }, this.renderToolbar(), h("div", { key: 'a04e1a78413aa794d0bda551aeb9c6245f1aafa2', class: {
+        return (h(Host, { key: '6792d49f08dd19f6c51e4b656df06bbd8bc14f3e' }, this.renderToolbar(), h("div", { key: '702f4c288f8c40bd2c5999beb392b9dfd022b0bc', class: {
                 'mrd-document-container__body': true,
                 'mrd-document-container__body--tree': treeMode,
             }, style: treeMode ? { height: `${this.height}px`, overflowY: 'auto' } : {} }, treeMode ? this.renderTree() : this.renderList())));
@@ -300,6 +306,26 @@ export class MrdDocumentContainer {
                 "reflect": false,
                 "attribute": "locale",
                 "defaultValue": "navigator.language"
+            },
+            "readOnly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true, this dashboard is read-only: New folder and Upload are disabled\n(with a tooltip explaining why) and the embedded table/list get it passed\nthrough so their own create/upload/drag-drop paths are disabled too."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "read-only",
+                "defaultValue": "false"
             }
         };
     }

package/dist/collection/components/documents/mrd-document-list/mrd-document-list.js

@@ -34,6 +34,11 @@ export class MrdDocumentList {
          *  accepts file drops and folder creation. */
         this.containerHref = '';
         this.locale = navigator.language;
+        /** When true, folder creation, file upload (button and drag-drop) and moving a
+         *  document between folders are all disabled — a viewer-role user can browse
+         *  but not mutate anything. Drives mrdCanCreate(false) so the host toolbar's
+         *  New folder / Upload buttons stay disabled too. */
+        this.readOnly = false;
         this.containers = [];
         this.rootLoading = true;
         /** True when the single-container level is collapsed away (dossier context). */
@@ -76,6 +81,8 @@ export class MrdDocumentList {
         /** The optimistic document row awaiting its self href from the create POST. */
         this.lastOptimisticDoc = null;
         this.startCreateFolder = () => {
+            if (this.readOnly)
+                return;
             const resolved = this.resolveTarget();
             if (!resolved || this.pendingNode)
                 return;
@@ -115,6 +122,10 @@ export class MrdDocumentList {
         // ── Drag & drop: move a document into another folder / container ────────────
         this.onDocDragStart = (e, doc, node) => {
             var _a, _b, _c;
+            if (this.readOnly) {
+                e.preventDefault();
+                return;
+            }
             this.dragDoc = doc;
             this.dragFromId = node.id;
             if (e.dataTransfer) {
@@ -134,6 +145,11 @@ export class MrdDocumentList {
          *  root drop-zone; a different node is highlighted (its own folder = no-op). */
         this.onNodeDragOver = (e, node) => {
             const file = this.isFileDrag(e);
+            if (this.readOnly) {
+                if (file)
+                    e.preventDefault(); // swallow so the browser doesn't navigate to the dropped file
+                return;
+            }
             if (!this.dragDoc && !file)
                 return;
             e.preventDefault();
@@ -149,6 +165,10 @@ export class MrdDocumentList {
                 this.dropTargetId = null;
         };
         this.onNodeDrop = (e, node, container) => {
+            if (this.readOnly) {
+                e.preventDefault();
+                return;
+            }
             if (this.isFileDrag(e)) {
                 e.preventDefault();
                 e.stopPropagation();
@@ -167,6 +187,11 @@ export class MrdDocumentList {
             if (!this.singleContainer)
                 return;
             const file = this.isFileDrag(e);
+            if (this.readOnly) {
+                if (file)
+                    e.preventDefault(); // swallow so the browser doesn't navigate to the dropped file
+                return;
+            }
             if (!this.dragDoc && !file)
                 return;
             e.preventDefault();
@@ -184,6 +209,10 @@ export class MrdDocumentList {
         };
         this.onRootDrop = (e) => {
             this.rootDropActive = false;
+            if (this.readOnly) {
+                e.preventDefault();
+                return;
+            }
             if (!this.singleContainer)
                 return;
             const only = this.containers[0];
@@ -454,10 +483,10 @@ export class MrdDocumentList {
         return null;
     }
     get canCreateFolder() {
-        return !this.pendingNode && this.resolveTarget() !== null;
+        return !this.readOnly && !this.pendingNode && this.resolveTarget() !== null;
     }
     /** Start creating a folder under the current target. Called by the host toolbar
-     *  (mrd-document-container). No-op when there is no valid target. */
+     *  (mrd-document-container). No-op when there is no valid target, or read-only. */
     async createFolder() {
         this.startCreateFolder();
     }
@@ -543,7 +572,7 @@ export class MrdDocumentList {
      *  (mrd-document-container). No-op without a target, or while another upload
      *  is still awaiting its setFileReference. */
     async uploadFile(file) {
-        if (!file || this.pendingUpload)
+        if (this.readOnly || !file || this.pendingUpload)
             return;
         const resolved = this.resolveTarget();
         if (!resolved)
@@ -684,7 +713,7 @@ export class MrdDocumentList {
             body = renderLoadingRow(ctx, 0);
         }
         else if (this.containers.length === 0) {
-            body = h("div", { key: '63604a99fc62d9108f61b8efc126c0cd3e8fc5ed', class: "mrd-document-list__empty" }, t('no_results', this.locale));
+            body = h("div", { key: '5d473ec3a894361325a71deb14e7b52d0abc5f06', class: "mrd-document-list__empty" }, t('no_results', this.locale));
         }
         else if (this.singleContainer) {
             // Dossier context: render the single container's folder tree at the root.
@@ -702,7 +731,7 @@ export class MrdDocumentList {
         else {
             body = this.containers.map(c => renderContainerNode(ctx, c, 0));
         }
-        return (h(Host, { key: '2a092e3a7483deb1fb30753b0c0428aaf75c303a' }, h("div", { key: '2b716c912a272b925a95133de5b1ff2abedd9dbc', class: 'mrd-document-list' + (this.rootDropActive ? ' mrd-document-list--drop-active' : ''), onDragOver: this.onRootDragOver, onDragLeave: this.onRootDragLeave, onDrop: this.onRootDrop }, body)));
+        return (h(Host, { key: '757babf3ccabbb113ab2a24d632b2b9a02d3c08b' }, h("div", { key: '606c212687482efdc5666333678e2ea406709e75', class: 'mrd-document-list' + (this.rootDropActive ? ' mrd-document-list--drop-active' : ''), onDragOver: this.onRootDragOver, onDragLeave: this.onRootDragLeave, onDrop: this.onRootDrop }, body)));
     }
     static get is() { return "mrd-document-list"; }
     static get encapsulation() { return "scoped"; }
@@ -826,6 +855,26 @@ export class MrdDocumentList {
                 "reflect": false,
                 "attribute": "locale",
                 "defaultValue": "navigator.language"
+            },
+            "readOnly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true, folder creation, file upload (button and drag-drop) and moving a\ndocument between folders are all disabled \u2014 a viewer-role user can browse\nbut not mutate anything. Drives mrdCanCreate(false) so the host toolbar's\nNew folder / Upload buttons stay disabled too."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "read-only",
+                "defaultValue": "false"
             }
         };
     }
@@ -1068,7 +1117,7 @@ export class MrdDocumentList {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Start creating a folder under the current target. Called by the host toolbar\n(mrd-document-container). No-op when there is no valid target.",
+                    "text": "Start creating a folder under the current target. Called by the host toolbar\n(mrd-document-container). No-op when there is no valid target, or read-only.",
                     "tags": []
                 }
             },

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

@@ -17,6 +17,10 @@ export class MrdLayoutSection {
         /** Top-level archetypes on the object dashboard. When it contains commons.document,
          *  the record is rendered as a single-document view instead of generic fields. */
         this.archetypes = [];
+        /** When true, this dashboard is read-only (viewer role): the embedded mrd-table's
+         *  create ("+") action and the documents view's New folder / Upload are disabled
+         *  with a tooltip explaining why, so it's clear at a glance the user can't mutate data. */
+        this.readOnly = false;
         this.searchQueryMap = {};
         this.searchResultsMap = {};
         this.imagePreviewUrl = null;
@@ -222,7 +226,7 @@ export class MrdLayoutSection {
      *  swaps between the folder tree and the flat table. Events are re-emitted to
      *  the host with the view key, exactly as the raw list/table events were. */
     renderDocumentContainer(item, key, parentId, archetype, containerHref) {
-        return (h("mrd-document-container", { item: item, archetype: archetype, parentId: parentId, containerHref: containerHref, viewKey: key, locale: this.locale, onMrdLoadDistinct: (e) => {
+        return (h("mrd-document-container", { item: item, archetype: archetype, parentId: parentId, containerHref: containerHref, viewKey: key, locale: this.locale, readOnly: this.readOnly, onMrdLoadDistinct: (e) => {
                 e.stopPropagation();
                 this.mrdLoadViewDistinct.emit(Object.assign({ name: key }, e.detail));
             }, onMrdLoadPage: (e) => {
@@ -255,7 +259,7 @@ export class MrdLayoutSection {
             } }));
     }
     renderTable(item, key, parentId) {
-        return (h("mrd-table", { "data-view": key, item: item, parentId: parentId, locale: this.locale, onMrdLoadPage: (e) => this.handleViewLoadPage(e, key), onMrdLoadAggregations: (e) => {
+        return (h("mrd-table", { "data-view": key, item: item, parentId: parentId, locale: this.locale, readOnly: this.readOnly, onMrdLoadPage: (e) => this.handleViewLoadPage(e, key), onMrdLoadAggregations: (e) => {
                 var _a;
                 e.stopPropagation();
                 this.mrdLoadViewAggregations.emit(Object.assign({ name: key, dataClass: (_a = item.dataClass) !== null && _a !== void 0 ? _a : key }, e.detail));
@@ -359,7 +363,7 @@ export class MrdLayoutSection {
         const docArchetype = resolveArchetype(this.archetypes, ARCHETYPE_DOCUMENT);
         const invoiceArchetype = !docArchetype ? resolveArchetype(this.archetypes, ARCHETYPE_INVOICE) : undefined;
         const emailArchetype = !docArchetype && !invoiceArchetype ? resolveArchetype(this.archetypes, ARCHETYPE_EMAIL) : undefined;
-        return (h(Host, { key: 'ccae8e82b4dd549ab24239fe685a6830a508061d' }, h("div", { key: '4072cc4ecdd2b087c54a5515e653f7f713b2150f', class: "mrd-layout-section" }, docArchetype && this.renderDocumentObject(docArchetype), invoiceArchetype && this.renderInvoiceObject(invoiceArchetype), emailArchetype && this.renderEmailObject(emailArchetype), !docArchetype && !invoiceArchetype && !emailArchetype && this.items.map(item => this.renderItem(item))), this.renderImageModal()));
+        return (h(Host, { key: '07b1d61b170a5ae971ba54eaf775e1787dea1642' }, h("div", { key: 'd146e0542b1de11bd130eb3d36d54e4faf055309', class: "mrd-layout-section" }, docArchetype && this.renderDocumentObject(docArchetype), invoiceArchetype && this.renderInvoiceObject(invoiceArchetype), emailArchetype && this.renderEmailObject(emailArchetype), !docArchetype && !invoiceArchetype && !emailArchetype && this.items.map(item => this.renderItem(item))), this.renderImageModal()));
     }
     static get is() { return "mrd-layout-section"; }
     static get encapsulation() { return "scoped"; }
@@ -519,6 +523,26 @@ export class MrdLayoutSection {
                 "getter": false,
                 "setter": false,
                 "defaultValue": "[]"
+            },
+            "readOnly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true, this dashboard is read-only (viewer role): the embedded mrd-table's\ncreate (\"+\") action and the documents view's New folder / Upload are disabled\nwith a tooltip explaining why, so it's clear at a glance the user can't mutate data."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "read-only",
+                "defaultValue": "false"
             }
         };
     }

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

@@ -321,6 +321,42 @@
   pointer-events: none;
   z-index: 10;
 }
+.mrd-table__search-box {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--mrd-space-1);
+  height: 2rem;
+  padding: 0 var(--mrd-space-2);
+  border: 1px solid var(--mrd-border-color-focus, var(--mrd-color-primary));
+  border-radius: var(--mrd-border-radius);
+  background: var(--mrd-color-white, #fff);
+  box-shadow: var(--mrd-shadow-focus, none);
+  color: var(--mrd-color-neutral-400);
+}
+.mrd-table__search-input {
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: var(--mrd-font-size-sm);
+  font-family: var(--mrd-font-family);
+  color: var(--mrd-color-neutral-800);
+  width: 12rem;
+}
+.mrd-table__search-clear {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  color: var(--mrd-color-neutral-400);
+  font-size: var(--mrd-font-size-xs);
+  line-height: 1;
+}
+.mrd-table__search-clear:hover {
+  color: var(--mrd-color-neutral-700);
+}
 .mrd-table__create-picker-wrap {
   position: relative;
 }