@mmlogic/components 0.3.8 → 0.3.9

package/dist/collection/collection-manifest.json

@@ -1,9 +1,11 @@
 {
   "entries": [
+    "components/mrd-document-list/mrd-document-list.js",
     "components/mrd-boolean-field/mrd-boolean-field.js",
     "components/mrd-currency-field/mrd-currency-field.js",
     "components/mrd-date-field/mrd-date-field.js",
     "components/mrd-datetime-field/mrd-datetime-field.js",
+    "components/mrd-document-view/mrd-document-view.js",
     "components/mrd-email-field/mrd-email-field.js",
     "components/mrd-field/mrd-field.js",
     "components/mrd-file-field/mrd-file-field.js",

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

@@ -20,7 +20,7 @@ export class MrdBooleanField {
         this.checked = !!this.value;
     }
     render() {
-        return (h(Host, { key: 'aed1d936d686870114a12aad9fc4cccb76ecd31e' }, h("div", { key: '5cc8aaa0f12d4195d02fce8a810d7d993e2e8c99', class: "mrd-boolean-field" }, h("label", { key: '41c3b3e0f01778fc2654ba86e3fe4e5a07c8537a', class: "mrd-boolean-field__toggle-label" }, h("input", { key: 'c261e6903e050d2f3d8df8abb90c74d99ed20161', class: "mrd-boolean-field__checkbox", type: "checkbox", name: this.name, checked: this.checked, disabled: this.disabled, onChange: this.handleChange, onBlur: this.handleBlur }), h("span", { key: '079ee220fe692536af15a7fb4286626102ae940e', class: "mrd-boolean-field__toggle", "aria-hidden": "true" }), this.label && (h("span", { key: '1f4f52a41f0bd6ba4c61cf9d4db74ab2f1aa8877', class: `mrd-boolean-field__text${this.required ? ' mrd-boolean-field__text--required' : ''}` }, this.label))))));
+        return (h(Host, { key: '38e65a1c7971912f8259d09281b272d7cbd446f2' }, h("div", { key: 'e10919998731d744cc2a13130c5f355c9b8fc9aa', class: "mrd-boolean-field" }, h("label", { key: 'db85a2c80cc62fdfd25237e3f5c7750bf1666819', class: "mrd-boolean-field__toggle-label" }, h("input", { key: 'cddd7004593fa4671abb89f4f805c4a009db99ef', class: "mrd-boolean-field__checkbox", type: "checkbox", name: this.name, checked: this.checked, disabled: this.disabled, onChange: this.handleChange, onBlur: this.handleBlur }), h("span", { key: 'f90f0ed6d74d6688e51b8d85a5397a0597d95ad8', class: "mrd-boolean-field__toggle", "aria-hidden": "true" }), this.label && (h("span", { key: '7e4582b1d9a5b08c00c220bec53baa6c14cbfe43', class: `mrd-boolean-field__text${this.required ? ' mrd-boolean-field__text--required' : ''}` }, this.label))))));
     }
     static get is() { return "mrd-boolean-field"; }
     static get encapsulation() { return "scoped"; }

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

@@ -48,7 +48,7 @@ export class MrdCurrencyField {
     }
     render() {
         const hasError = !!this.error;
-        return (h(Host, { key: 'd3450e9c26b1a755d3e6a5a3561d93b2ac566a28' }, h("div", { key: 'b66942cc1953daff728504deef8a9cc1330ef549', class: "mrd-currency-field" }, this.label && (h("label", { key: '3d3f2f06e9ffea944552f0f7cf3150d0246c54f0', class: `mrd-currency-field__label${this.required ? ' mrd-currency-field__label--required' : ''}` }, this.label)), h("div", { key: 'd30a2adfceefdbefef2d4fe6633a163a753b15d0', class: "mrd-currency-field__row" }, h("input", { key: '9af09b19b6cbe24498d6ca8edf7b28f675afdec5', class: `mrd-currency-field__amount${hasError ? ' mrd-currency-field__amount--error' : ''}`, type: "text", inputMode: "decimal", name: `${this.name}_amount`, value: this.amountDisplay, placeholder: "0.00", required: this.required, disabled: this.disabled, onInput: this.handleAmountInput, onBlur: this.handleAmountBlur }), h("select", { key: '21e55b04b7bf16586b5cfaa82d77db45c6dedf21', class: "mrd-currency-field__currency", disabled: this.disabled, onChange: this.handleCurrencyChange }, COMMON_CURRENCIES.map(c => (h("option", { key: c, value: c, selected: c === this.currency }, c))))), hasError && h("span", { key: '7a0006d4230557cf9c58f82f21de73b5d12f7e17', class: "mrd-currency-field__error" }, this.error))));
+        return (h(Host, { key: 'fe3520c44d831caf36b388cb5968a9518b16cb8b' }, h("div", { key: '50c1fd2d53038e46da575d3e46e1ec26c2da423b', class: "mrd-currency-field" }, this.label && (h("label", { key: 'a2649d41bf6e3765c8a62ba6559c64c41615027a', class: `mrd-currency-field__label${this.required ? ' mrd-currency-field__label--required' : ''}` }, this.label)), h("div", { key: '952b51f315b4a5c05a8373ce3a3f1041086ba8b8', class: "mrd-currency-field__row" }, h("input", { key: '137a72ffc5d79fc8e0a8cf44c012d84a50c26d5b', class: `mrd-currency-field__amount${hasError ? ' mrd-currency-field__amount--error' : ''}`, type: "text", inputMode: "decimal", name: `${this.name}_amount`, value: this.amountDisplay, placeholder: "0.00", required: this.required, disabled: this.disabled, onInput: this.handleAmountInput, onBlur: this.handleAmountBlur }), h("select", { key: '1755854ca9b76dc4b41ad84b6b788685931ace36', class: "mrd-currency-field__currency", disabled: this.disabled, onChange: this.handleCurrencyChange }, COMMON_CURRENCIES.map(c => (h("option", { key: c, value: c, selected: c === this.currency }, c))))), hasError && h("span", { key: '0f10eb98c2e6444651d79d1de92acd0dbcc7133b', class: "mrd-currency-field__error" }, this.error))));
     }
     static get is() { return "mrd-currency-field"; }
     static get encapsulation() { return "scoped"; }

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

@@ -27,7 +27,7 @@ export class MrdDateField {
     }
     render() {
         const hasError = !!this.error;
-        return (h(Host, { key: '84c777fc68a95e0b1ceb08d61e3af7afa199ce94' }, h("div", { key: '6653d94ab79c74342ce792792547018e4464a814', class: "mrd-date-field" }, this.label && (h("label", { key: '2fa7b7ec50c784f9410ca48b93d50e39dc6e0bee', class: `mrd-date-field__label${this.required ? ' mrd-date-field__label--required' : ''}` }, this.label)), h("input", { key: 'f79ebbaf0e28ad7668a5400d1df514b66457b72d', class: `mrd-date-field__input${hasError ? ' mrd-date-field__input--error' : ''}`, type: "date", name: this.name, value: this.value, required: this.required, disabled: this.disabled, onChange: this.handleChange, onBlur: this.handleBlur }), hasError && h("span", { key: 'e52f0b720d76e8ba0586fb40395b6875860762db', class: "mrd-date-field__error" }, this.error))));
+        return (h(Host, { key: '2c0dc2311068a5c759fe8efe58a98a71a9cf4b7b' }, h("div", { key: 'ee1cc0e9a2943cc42439825b8f21cd3492eaca05', class: "mrd-date-field" }, this.label && (h("label", { key: '3f836a991e676b6070a8b3800edfce00cc0d3b3d', class: `mrd-date-field__label${this.required ? ' mrd-date-field__label--required' : ''}` }, this.label)), h("input", { key: '575185661987eea3dc91950f51995b2cc75debea', class: `mrd-date-field__input${hasError ? ' mrd-date-field__input--error' : ''}`, type: "date", name: this.name, value: this.value, required: this.required, disabled: this.disabled, onChange: this.handleChange, onBlur: this.handleBlur }), hasError && h("span", { key: '480ec99200989f3dc543d9afc648d83d31992b3c', class: "mrd-date-field__error" }, this.error))));
     }
     static get is() { return "mrd-date-field"; }
     static get encapsulation() { return "scoped"; }

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

@@ -54,7 +54,7 @@ export class MrdDatetimeField {
     }
     render() {
         const hasError = !!this.error;
-        return (h(Host, { key: '6052b08238484bee345ae4bb9b3025c7f2474c35' }, h("div", { key: 'f9073be4496e35a7d40405ae4e6a27a5c1607626', class: "mrd-datetime-field" }, this.label && (h("label", { key: '5933c3b2dfcae9bfad378441210ada6b625657a2', class: `mrd-datetime-field__label${this.required ? ' mrd-datetime-field__label--required' : ''}` }, this.label)), h("input", { key: '7a947b104c38960d2326a4877e4ca52db9fd9d84', class: `mrd-datetime-field__input${hasError ? ' mrd-datetime-field__input--error' : ''}`, type: "datetime-local", name: this.name, value: this.localValue, required: this.required, disabled: this.disabled, onChange: this.handleChange, onBlur: this.handleBlur }), hasError && h("span", { key: 'cea3dba7e14e18a3a08394ef3027b661f1808969', class: "mrd-datetime-field__error" }, this.error))));
+        return (h(Host, { key: 'ea8b3b68100ffdb316bc5048f82d85d238bb2e4b' }, h("div", { key: 'c192c6998ee474aaf4df7b3b97ae0bd61f6d624d', class: "mrd-datetime-field" }, this.label && (h("label", { key: '1fbd66c17d76508f0d698a2c258be6779e98d85e', class: `mrd-datetime-field__label${this.required ? ' mrd-datetime-field__label--required' : ''}` }, this.label)), h("input", { key: 'fc9612c062a1cab5076a06598cabf227adce996c', class: `mrd-datetime-field__input${hasError ? ' mrd-datetime-field__input--error' : ''}`, type: "datetime-local", name: this.name, value: this.localValue, required: this.required, disabled: this.disabled, onChange: this.handleChange, onBlur: this.handleBlur }), hasError && h("span", { key: '8788ac01739302f6ad61010b238ff38d45e1b68a', class: "mrd-datetime-field__error" }, this.error))));
     }
     static get is() { return "mrd-datetime-field"; }
     static get encapsulation() { return "scoped"; }

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

@@ -0,0 +1,578 @@
+import { Host, h } from "@stencil/core";
+import { ClientLayoutItemType } from "../../types/client-layout";
+import { t } from "../../utils/i18n";
+import { formatDate } from "../../utils/format";
+/**
+ * Archetype-driven document collection view. Renders documents as a lazy,
+ * file-explorer-style folder tree, grouped by the `commons.document` archetype's
+ * `container` (dossier, the top folder) and `folder` (a path string like
+ * `/draft documents/may 2020`, the sub-path beneath it).
+ *
+ * Loading is lazy per level, mirroring the /distinct endpoint (FINDING-0106):
+ *  - on load → `mrdLoadDistinct` for the `container` relation → top folders;
+ *  - on expanding a container → `mrdLoadDistinct` for the `folder` field, filtered
+ *    by `{containerField}_href` → all folder path strings for that container
+ *    (the client splits them on `/` and builds the sub-tree locally);
+ *  - on expanding a node that holds documents → `mrdLoadPage` (a plain filtered list
+ *    load, the same one a table page uses), filtered by container + exact folder string.
+ *
+ * When exactly one container exists (e.g. a dossier detail page) the container
+ * level is hidden and its folder tree is shown directly at the root.
+ */
+export class MrdDocumentList {
+    constructor() {
+        /** The VIEW or RELATED_VIEW layout item (dataClass, fromClass, view config). */
+        this.item = null;
+        /** Parent record id — required for RELATED_VIEW path building. */
+        this.parentId = '';
+        this.locale = navigator.language;
+        this.containers = [];
+        this.rootLoading = true;
+        /** True when the single-container level is collapsed away (dossier context). */
+        this.singleContainer = false;
+        this.nodeIndex = new Map();
+    }
+    componentDidLoad() {
+        this.emitContainerDistinct();
+    }
+    // ── Slot field names ─────────────────────────────────────────────────────
+    get containerField() {
+        var _a, _b, _c;
+        return (_c = (_b = (_a = this.archetype) === null || _a === void 0 ? void 0 : _a.slots) === null || _b === void 0 ? void 0 : _b.container) !== null && _c !== void 0 ? _c : 'container';
+    }
+    get folderField() {
+        var _a, _b, _c;
+        return (_c = (_b = (_a = this.archetype) === null || _a === void 0 ? void 0 : _a.slots) === null || _b === void 0 ? void 0 : _b.folder) !== null && _c !== void 0 ? _c : 'folder';
+    }
+    get titleField() {
+        var _a, _b, _c;
+        return (_c = (_b = (_a = this.archetype) === null || _a === void 0 ? void 0 : _a.slots) === null || _b === void 0 ? void 0 : _b.title) !== null && _c !== void 0 ? _c : 'name';
+    }
+    get dateField() {
+        var _a, _b;
+        return (_b = (_a = this.archetype) === null || _a === void 0 ? void 0 : _a.slots) === null || _b === void 0 ? void 0 : _b.date;
+    }
+    // ── Path / query building (mirrors mrd-table conventions) ────────────────
+    /** VIEW: `/{dataClass}`; RELATED_VIEW: `/{fromClass}/{parentId}/{dataClass}`. */
+    buildDataPath() {
+        var _a, _b, _c;
+        const it = this.item;
+        const dataClass = (_b = (_a = it === null || it === void 0 ? void 0 : it.dataClass) !== null && _a !== void 0 ? _a : it === null || it === void 0 ? void 0 : it.relatedClass) !== null && _b !== void 0 ? _b : '';
+        if ((it === null || it === void 0 ? void 0 : it.type) === ClientLayoutItemType.RELATED_VIEW) {
+            return `/${(_c = it.fromClass) !== null && _c !== void 0 ? _c : ''}/${this.parentId}/${dataClass}`;
+        }
+        return `/${dataClass}`;
+    }
+    /** View-level static filters + filterClass, shared by every request. */
+    baseParams() {
+        var _a, _b, _c, _d, _e, _f, _g;
+        const p = new URLSearchParams();
+        const filterClass = (_a = this.item) === null || _a === void 0 ? void 0 : _a.filterClass;
+        if (filterClass)
+            p.set('type', filterClass);
+        for (const f of ((_d = (_c = (_b = this.item) === null || _b === void 0 ? void 0 : _b.view) === null || _c === void 0 ? void 0 : _c.filter) !== null && _d !== void 0 ? _d : [])) {
+            if (!f.name)
+                continue;
+            if (f.operator === 'EMPTY') {
+                p.set(f.name, '');
+                continue;
+            }
+            if (f.operator === 'NOT_EMPTY') {
+                p.set(f.name + '_notempty', 'true');
+                continue;
+            }
+            if (f.operator === 'STARTS_WITH') {
+                p.set(f.name + '_startswith', String((_e = f.value) !== null && _e !== void 0 ? _e : ''));
+                continue;
+            }
+            if (f.operator === 'FROM') {
+                p.set(f.name + '_from', String((_f = f.value) !== null && _f !== void 0 ? _f : ''));
+                continue;
+            }
+            if (f.operator === 'TO') {
+                p.set(f.name + '_to', String((_g = f.value) !== null && _g !== void 0 ? _g : ''));
+                continue;
+            }
+            if (f.value != null) {
+                p.set(f.name, String(f.value));
+            }
+        }
+        return p;
+    }
+    emitContainerDistinct() {
+        const p = this.baseParams();
+        p.set('distinct', this.containerField);
+        this.mrdLoadDistinct.emit({
+            nodeId: MrdDocumentList.ROOT,
+            distinct: this.containerField,
+            path: this.buildDataPath() + '/distinct',
+            qs: p.toString(),
+        });
+    }
+    emitFolderDistinct(container) {
+        var _a;
+        const p = this.baseParams();
+        p.set('distinct', this.folderField);
+        p.set(this.containerField + '_href', (_a = container.href) !== null && _a !== void 0 ? _a : '');
+        container.loading = true;
+        this.mrdLoadDistinct.emit({
+            nodeId: container.id,
+            distinct: this.folderField,
+            path: this.buildDataPath() + '/distinct',
+            qs: p.toString(),
+        });
+    }
+    emitDocuments(container, node) {
+        var _a, _b;
+        const p = this.baseParams();
+        p.set(this.containerField + '_href', (_a = container.href) !== null && _a !== void 0 ? _a : '');
+        p.set(this.folderField, (_b = node.fullPath) !== null && _b !== void 0 ? _b : '');
+        node.loading = true;
+        this.mrdLoadPage.emit({
+            nodeId: node.id,
+            page: 0,
+            sort: '',
+            path: this.buildDataPath(),
+            qs: p.toString(),
+        });
+    }
+    // ── Public injection API ─────────────────────────────────────────────────
+    /** Inject distinct values for a node. `nodeId` is the sentinel root (containers)
+     *  or a container node id (folders). */
+    async setDistinct(nodeId, values) {
+        if (nodeId === MrdDocumentList.ROOT) {
+            this.applyContainers(values);
+        }
+        else {
+            this.applyFolders(nodeId, values);
+        }
+    }
+    /** Inject the documents loaded for one folder node. */
+    async setDocuments(nodeId, docs) {
+        const node = this.nodeIndex.get(nodeId);
+        if (!node)
+            return;
+        node.docs = docs !== null && docs !== void 0 ? docs : [];
+        node.docsLoaded = true;
+        node.loading = false;
+        this.bump();
+    }
+    applyContainers(values) {
+        const nodes = [];
+        for (const v of values) {
+            if (!v.value || typeof v.value !== 'object')
+                continue;
+            const href = v.value.href;
+            const node = this.makeContainerNode(href, v.value.name, v.count);
+            nodes.push(node);
+            this.nodeIndex.set(node.id, node);
+        }
+        this.containers = nodes;
+        this.rootLoading = false;
+        this.singleContainer = nodes.length === 1;
+        // Single container (dossier context): collapse the level away, load its folders now.
+        if (this.singleContainer) {
+            const only = nodes[0];
+            only.open = true;
+            this.emitFolderDistinct(only);
+        }
+    }
+    applyFolders(containerId, values) {
+        const container = this.nodeIndex.get(containerId);
+        if (!container)
+            return;
+        container.children = [];
+        container.hasDocs = false;
+        container.docCount = 0;
+        for (const v of values) {
+            const raw = typeof v.value === 'string' ? v.value : v.value == null ? '' : String(v.value);
+            const segs = this.splitFolder(raw);
+            if (segs.length === 0) {
+                // Root documents — the container's own direct documents.
+                container.hasDocs = true;
+                container.docCount = v.count;
+                container.fullPath = raw;
+                continue;
+            }
+            let node = container;
+            const acc = [];
+            for (const seg of segs) {
+                acc.push(seg);
+                let child = node.children.find(c => c.label === seg);
+                if (!child) {
+                    child = this.makeFolderNode(container.id + '/' + acc.join('/'), seg);
+                    node.children.push(child);
+                    this.nodeIndex.set(child.id, child);
+                }
+                node = child;
+            }
+            node.hasDocs = true;
+            node.docCount = v.count;
+            node.fullPath = raw;
+        }
+        this.computeTotals(container);
+        container.foldersLoaded = true;
+        container.loading = false;
+        // If the container has root documents, load them now (they show inline on expand).
+        if (container.hasDocs && !container.docsLoaded) {
+            this.emitDocuments(container, container);
+        }
+        this.bump();
+    }
+    // ── Tree helpers ─────────────────────────────────────────────────────────
+    /** Normalise a folder path: null/""/"/" → root ([]); else split on "/" dropping empties. */
+    splitFolder(path) {
+        if (path == null)
+            return [];
+        const s = String(path).trim();
+        if (s === '' || s === '/')
+            return [];
+        return s.split('/').map(x => x.trim()).filter(Boolean);
+    }
+    makeContainerNode(href, label, count) {
+        return {
+            id: 'c:' + href, kind: 'container', label, href,
+            hasDocs: false, docCount: 0, totalCount: count, children: [],
+            open: false, loading: false, foldersLoaded: false, docsLoaded: false, docs: [],
+        };
+    }
+    makeFolderNode(id, label) {
+        return {
+            id, kind: 'folder', label,
+            hasDocs: false, docCount: 0, totalCount: 0, children: [],
+            open: false, loading: false, foldersLoaded: false, docsLoaded: false, docs: [],
+        };
+    }
+    computeTotals(node) {
+        let total = node.docCount;
+        for (const c of node.children)
+            total += this.computeTotals(c);
+        node.totalCount = total;
+        return total;
+    }
+    /** Force a re-render after mutating nodes in place. */
+    bump() {
+        this.containers = [...this.containers];
+    }
+    // ── Interaction ──────────────────────────────────────────────────────────
+    toggleContainer(node) {
+        node.open = !node.open;
+        if (node.open && !node.foldersLoaded && !node.loading) {
+            this.emitFolderDistinct(node);
+        }
+        this.bump();
+    }
+    toggleFolder(container, node) {
+        node.open = !node.open;
+        if (node.open && node.hasDocs && !node.docsLoaded && !node.loading) {
+            this.emitDocuments(container, node);
+        }
+        this.bump();
+    }
+    openDoc(doc) {
+        var _a, _b, _c, _d;
+        const href = (_b = (_a = doc === null || doc === void 0 ? void 0 : doc._links) === null || _a === void 0 ? void 0 : _a.self) === null || _b === void 0 ? void 0 : _b.href;
+        const label = (_d = (_c = doc === null || doc === void 0 ? void 0 : doc[this.titleField]) !== null && _c !== void 0 ? _c : doc === null || doc === void 0 ? void 0 : doc.name) !== null && _d !== void 0 ? _d : '';
+        this.mrdNavigate.emit({ href, label });
+    }
+    // ── Render ───────────────────────────────────────────────────────────────
+    renderChevron(open, leaf) {
+        return (h("span", { class: `mrd-document-list__chev${leaf ? ' mrd-document-list__chev--leaf' : ''}${open ? ' mrd-document-list__chev--open' : ''}` }, 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: "M9 6l6 6-6 6" }))));
+    }
+    renderDossierIcon() {
+        return (h("svg", { class: "mrd-document-list__icon mrd-document-list__icon--dossier", 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" })));
+    }
+    renderFolderIcon() {
+        return (h("svg", { class: "mrd-document-list__icon mrd-document-list__icon--folder", 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" })));
+    }
+    renderDocIcon() {
+        return (h("svg", { class: "mrd-document-list__icon mrd-document-list__icon--doc", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }), h("path", { d: "M14 2v6h6" })));
+    }
+    indent(depth) {
+        return h("span", { class: "mrd-document-list__indent", style: { width: `${depth * 18}px` } });
+    }
+    renderDocRow(doc, depth) {
+        var _a, _b, _c, _d, _e;
+        const label = (_b = (_a = doc === null || doc === void 0 ? void 0 : doc[this.titleField]) !== null && _a !== void 0 ? _a : doc === null || doc === void 0 ? void 0 : doc.name) !== null && _b !== void 0 ? _b : '';
+        const dateRaw = this.dateField ? doc === null || doc === void 0 ? void 0 : doc[this.dateField] : undefined;
+        const date = dateRaw ? formatDate(dateRaw, this.locale) : '';
+        return (h("div", { class: "mrd-document-list__row mrd-document-list__row--doc", key: (_e = (_d = (_c = doc === null || doc === void 0 ? void 0 : doc._links) === null || _c === void 0 ? void 0 : _c.self) === null || _d === void 0 ? void 0 : _d.href) !== null && _e !== void 0 ? _e : label, onClick: () => this.openDoc(doc) }, this.indent(depth), this.renderChevron(false, true), this.renderDocIcon(), h("span", { class: "mrd-document-list__label" }, label), date && h("span", { class: "mrd-document-list__date" }, date)));
+    }
+    renderLoadingRow(depth) {
+        return (h("div", { class: "mrd-document-list__loading", key: "loading" }, this.indent(depth), h("span", { class: "mrd-document-list__spinner" }), t('loading', this.locale)));
+    }
+    renderChildren(container, node, depth) {
+        const out = [];
+        // Direct documents of this node (root docs live on the container node).
+        if (node.hasDocs) {
+            if (node.docsLoaded) {
+                for (const doc of node.docs)
+                    out.push(this.renderDocRow(doc, depth));
+            }
+            else if (node.loading) {
+                out.push(this.renderLoadingRow(depth));
+            }
+        }
+        // Child folders.
+        for (const child of node.children) {
+            out.push(this.renderFolderNode(container, child, depth));
+        }
+        return out;
+    }
+    renderFolderNode(container, node, depth) {
+        const leaf = node.children.length === 0 && !node.hasDocs;
+        return (h("div", { class: "mrd-document-list__node", key: node.id }, h("div", { class: "mrd-document-list__row", onClick: () => this.toggleFolder(container, node) }, this.indent(depth), this.renderChevron(node.open, leaf), this.renderFolderIcon(), h("span", { class: "mrd-document-list__label" }, node.label), h("span", { class: "mrd-document-list__count" }, node.totalCount)), node.open && h("div", { class: "mrd-document-list__kids" }, this.renderChildren(container, node, depth + 1))));
+    }
+    renderContainerNode(node, depth) {
+        return (h("div", { class: "mrd-document-list__node", key: node.id }, h("div", { class: "mrd-document-list__row mrd-document-list__row--dossier", onClick: () => this.toggleContainer(node) }, this.indent(depth), this.renderChevron(node.open, false), this.renderDossierIcon(), h("span", { class: "mrd-document-list__label" }, node.label), h("span", { class: "mrd-document-list__count" }, node.totalCount)), node.open && (h("div", { class: "mrd-document-list__kids" }, node.loading && !node.foldersLoaded
+            ? this.renderLoadingRow(depth + 1)
+            : this.renderChildren(node, node, depth + 1)))));
+    }
+    render() {
+        let body;
+        if (this.rootLoading) {
+            body = this.renderLoadingRow(0);
+        }
+        else if (this.containers.length === 0) {
+            body = h("div", { key: '0c4190bb86543e2d37cc1584b3495eb6eab5664c', 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.
+            const only = this.containers[0];
+            body = only.loading && !only.foldersLoaded
+                ? this.renderLoadingRow(0)
+                : this.renderChildren(only, only, 0);
+        }
+        else {
+            body = this.containers.map(c => this.renderContainerNode(c, 0));
+        }
+        return (h(Host, { key: '4e38d9ef5a1df137a41516a47dc5debbea6b2f35' }, h("div", { key: '6d2f162624e5bbc8650a2978a3b045c21fe13ea3', class: "mrd-document-list" }, body)));
+    }
+    static get is() { return "mrd-document-list"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["mrd-document-list.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["mrd-document-list.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "item": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ClientLayoutItem | null",
+                    "resolved": "ClientLayoutItem | null",
+                    "references": {
+                        "ClientLayoutItem": {
+                            "location": "import",
+                            "path": "../../types/client-layout",
+                            "id": "src/types/client-layout.ts::ClientLayoutItem",
+                            "referenceLocation": "ClientLayoutItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The VIEW or RELATED_VIEW layout item (dataClass, fromClass, view config)."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "null"
+            },
+            "archetype": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ClientArchetype",
+                    "resolved": "ClientArchetype",
+                    "references": {
+                        "ClientArchetype": {
+                            "location": "import",
+                            "path": "../../types/client-layout",
+                            "id": "src/types/client-layout.ts::ClientArchetype",
+                            "referenceLocation": "ClientArchetype"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Resolved `commons.document` binding: slot name \u2192 concrete field/relation name."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "parentId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Parent record id \u2014 required for RELATED_VIEW path building."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "parent-id",
+                "defaultValue": "''"
+            },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "locale",
+                "defaultValue": "navigator.language"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "containers": {},
+            "rootLoading": {},
+            "singleContainer": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "mrdLoadDistinct",
+                "name": "mrdLoadDistinct",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Request distinct values for a field/relation. Host fetches `{path}?{qs}` and calls `setDistinct(nodeId, values)`."
+                },
+                "complexType": {
+                    "original": "{ nodeId: string; distinct: string; path: string; qs: string }",
+                    "resolved": "{ nodeId: string; distinct: string; path: string; qs: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "mrdLoadPage",
+                "name": "mrdLoadPage",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Request the documents in one folder \u2014 the same filtered list load a table does.\nHost fetches `{path}?{qs}` and calls `setDocuments(nodeId, docs)` (via setViewPage)."
+                },
+                "complexType": {
+                    "original": "{ nodeId: string; page: number; sort: string; path: string; qs: string }",
+                    "resolved": "{ nodeId: string; page: number; sort: string; path: string; qs: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "mrdNavigate",
+                "name": "mrdNavigate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A document row was clicked. Host routes to the document object page."
+                },
+                "complexType": {
+                    "original": "{ href?: string; label: string }",
+                    "resolved": "{ href?: string | undefined; label: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setDistinct": {
+                "complexType": {
+                    "signature": "(nodeId: string, values: DistinctValue[]) => Promise<void>",
+                    "parameters": [{
+                            "name": "nodeId",
+                            "type": "string",
+                            "docs": ""
+                        }, {
+                            "name": "values",
+                            "type": "DistinctValue[]",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "DistinctValue": {
+                            "location": "local",
+                            "path": "/Users/michiel/Mosterd/mosterd-components/src/components/mrd-document-list/mrd-document-list.tsx",
+                            "id": "src/components/mrd-document-list/mrd-document-list.tsx::DistinctValue"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Inject distinct values for a node. `nodeId` is the sentinel root (containers)\nor a container node id (folders).",
+                    "tags": []
+                }
+            },
+            "setDocuments": {
+                "complexType": {
+                    "signature": "(nodeId: string, docs: DocRow[]) => Promise<void>",
+                    "parameters": [{
+                            "name": "nodeId",
+                            "type": "string",
+                            "docs": ""
+                        }, {
+                            "name": "docs",
+                            "type": "DocRow[]",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "DocRow": {
+                            "location": "local",
+                            "path": "/Users/michiel/Mosterd/mosterd-components/src/components/mrd-document-list/mrd-document-list.tsx",
+                            "id": "src/components/mrd-document-list/mrd-document-list.tsx::DocRow"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Inject the documents loaded for one folder node.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+/** Root sentinel id for the container-level distinct request. */
+MrdDocumentList.ROOT = '__root__';