@mmlogic/components 0.3.8 → 0.3.10

package/dist/collection/collection-manifest.json

@@ -1,9 +1,12 @@
 {
   "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-container/mrd-document-container.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-container/mrd-document-container.js

@@ -0,0 +1,375 @@
+import { Host, h } from "@stencil/core";
+import { t } from "../../utils/i18n";
+/**
+ * Owns a document collection view: a single toolbar (view switch + collection
+ * actions like "New folder", and — later — upload / drag-drop) plus the two
+ * interchangeable bodies, the folder tree (`mrd-document-list`) and the flat
+ * table (`mrd-table`).
+ *
+ * `mrd-layout-section` renders one of these per document VIEW / RELATED_VIEW and
+ * forwards the re-emitted load/navigate/action events to the host. The embedded
+ * table/list keep their `data-view` / `data-doclist` attributes so the host's
+ * existing `setViewPage` / `setViewDistinct` / `setViewAggregations` lookups
+ * (recursive querySelector) still resolve them unchanged.
+ */
+export class MrdDocumentContainer {
+    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 = '';
+        /** Lookup key used for the embedded `data-doclist` / `data-view` attributes. */
+        this.viewKey = '';
+        this.locale = navigator.language;
+        /** Active body: folder tree or flat table. */
+        this.mode = 'tree';
+        /** Whether the folder tree currently has a valid target for "New folder". */
+        this.canCreate = false;
+        /** Whether the currently mounted table has been init()'d. Reset on every mode switch. */
+        this.tableInited = false;
+        this.createFolder = () => {
+            var _a, _b;
+            (_b = (_a = this.listEl) === null || _a === void 0 ? void 0 : _a.createFolder) === null || _b === void 0 ? void 0 : _b.call(_a);
+        };
+    }
+    /** The embedded table does not self-load: like every mrd-table it waits for the
+     *  host to call init() (which emits mrdLoadPage, and — once page 0 lands —
+     *  mrdLoadAggregations). The section only init()s tables mounted at load time, so
+     *  when the user switches to list view we init the freshly mounted table here. */
+    componentDidRender() {
+        var _a;
+        if (this.mode === 'list' && this.tableEl && !this.tableInited) {
+            this.tableInited = true;
+            const table = this.tableEl;
+            Promise.resolve((_a = table.componentOnReady) === null || _a === void 0 ? void 0 : _a.call(table)).then(() => { var _a; return (_a = table.init) === null || _a === void 0 ? void 0 : _a.call(table); });
+        }
+    }
+    setMode(mode) {
+        if (mode === this.mode)
+            return;
+        // The tree remounts on switch and re-emits mrdCanCreate; until then, disable.
+        this.canCreate = false;
+        // The table remounts on switch; re-init it once it is back in the DOM.
+        this.tableInited = false;
+        this.mode = mode;
+    }
+    // ── 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))), 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, locale: this.locale, onMrdLoadDistinct: (e) => {
+                e.stopPropagation();
+                this.mrdLoadDistinct.emit(e.detail);
+            }, onMrdLoadPage: (e) => {
+                e.stopPropagation();
+                this.mrdLoadPage.emit(e.detail);
+            }, onMrdNavigate: (e) => {
+                e.stopPropagation();
+                this.mrdNavigate.emit(e.detail);
+            }, onMrdCanCreate: (e) => {
+                e.stopPropagation();
+                this.canCreate = e.detail;
+            }, onMrdUpdateObject: (e) => {
+                e.stopPropagation();
+                this.mrdUpdateObject.emit(e.detail);
+            }, onMrdUpload: (e) => {
+                e.stopPropagation();
+                this.mrdUpload.emit(e.detail);
+            }, onMrdCreateObject: (e) => {
+                e.stopPropagation();
+                this.mrdCreateObject.emit(e.detail);
+            } }));
+    }
+    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) => {
+                e.stopPropagation();
+                this.mrdLoadPage.emit(e.detail);
+            }, onMrdLoadAggregations: (e) => {
+                e.stopPropagation();
+                this.mrdLoadAggregations.emit(e.detail);
+            }, onMrdRowClick: (e) => {
+                var _a, _b, _c;
+                e.stopPropagation();
+                const row = e.detail;
+                this.mrdNavigate.emit({ href: (_b = (_a = row === null || row === void 0 ? void 0 : row._links) === null || _a === void 0 ? void 0 : _a.self) === null || _b === void 0 ? void 0 : _b.href, label: (_c = row === null || row === void 0 ? void 0 : row.name) !== null && _c !== void 0 ? _c : '' });
+            }, onMrdAction: (e) => {
+                e.stopPropagation();
+                this.mrdAction.emit(e.detail);
+            } }));
+    }
+    render() {
+        return (h(Host, { key: 'a5393d484bdc202b57c6d32d9ce917e760aff95a' }, this.renderToolbar(), h("div", { key: '52f82de8f7734e13f34d323e3e831e6de5676f46', class: "mrd-document-container__body" }, this.mode === 'tree' ? this.renderTree() : this.renderList())));
+    }
+    static get is() { return "mrd-document-container"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["mrd-document-container.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["mrd-document-container.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` archetype binding for the folder tree."
+                },
+                "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": "''"
+            },
+            "viewKey": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Lookup key used for the embedded `data-doclist` / `data-view` attributes."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "view-key",
+                "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 {
+            "mode": {},
+            "canCreate": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "mrdLoadPage",
+                "name": "mrdLoadPage",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Re-emitted from the embedded list/table. `nodeId` present for a folder load."
+                },
+                "complexType": {
+                    "original": "{ page: number; sort: string; path: string; qs: string; nodeId?: string }",
+                    "resolved": "{ page: number; sort: string; path: string; qs: string; nodeId?: string | undefined; }",
+                    "references": {}
+                }
+            }, {
+                "method": "mrdLoadDistinct",
+                "name": "mrdLoadDistinct",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Re-emitted from the embedded folder tree."
+                },
+                "complexType": {
+                    "original": "{ nodeId: string; distinct: string; path: string; qs: string }",
+                    "resolved": "{ nodeId: string; distinct: string; path: string; qs: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "mrdLoadAggregations",
+                "name": "mrdLoadAggregations",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Re-emitted from the embedded table."
+                },
+                "complexType": {
+                    "original": "{ path: string; qs: string; aggQs: string }",
+                    "resolved": "{ path: string; qs: string; aggQs: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "mrdNavigate",
+                "name": "mrdNavigate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A row / document was activated. Host routes to the object page."
+                },
+                "complexType": {
+                    "original": "{ href?: string; label: string }",
+                    "resolved": "{ href?: string | undefined; label: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "mrdAction",
+                "name": "mrdAction",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A table toolbar action was triggered."
+                },
+                "complexType": {
+                    "original": "{ action: string; path?: string; qs?: string; parentPath?: string | null; basicType?: string }",
+                    "resolved": "{ action: string; path?: string | undefined; qs?: string | undefined; parentPath?: string | null | undefined; basicType?: string | undefined; }",
+                    "references": {}
+                }
+            }, {
+                "method": "mrdUpdateObject",
+                "name": "mrdUpdateObject",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Generic \"update an existing object\" request, re-emitted from the folder tree\n(a document was dragged into another folder/container)."
+                },
+                "complexType": {
+                    "original": "{ href: string; values: Record<string, unknown> }",
+                    "resolved": "{ href: string; values: Record<string, unknown>; }",
+                    "references": {
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    }
+                }
+            }, {
+                "method": "mrdUpload",
+                "name": "mrdUpload",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "An external file was dropped on a folder; host uploads and calls back."
+                },
+                "complexType": {
+                    "original": "{ file: File }",
+                    "resolved": "{ file: File; }",
+                    "references": {
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
+                        }
+                    }
+                }
+            }, {
+                "method": "mrdCreateObject",
+                "name": "mrdCreateObject",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Create a new document from an uploaded file; host POSTs `values` to `path`."
+                },
+                "complexType": {
+                    "original": "{ path: string; values: Record<string, unknown> }",
+                    "resolved": "{ path: string; values: Record<string, unknown>; }",
+                    "references": {
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/mrd-document-container/mrd-document-container.scss

@@ -0,0 +1,79 @@
+:host {
+  display: block;
+}
+
+.mrd-document-container__toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--mrd-space-2);
+  padding: var(--mrd-space-2) var(--mrd-space-4);
+  border-bottom: 1px solid var(--mrd-color-neutral-100);
+}
+
+.mrd-document-container__action {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--mrd-space-2);
+  height: 1.625rem;
+  padding: 0 var(--mrd-space-3);
+  font-size: var(--mrd-font-size-sm);
+  color: var(--mrd-color-neutral-700);
+  background: var(--mrd-color-white);
+  border: 1px solid var(--mrd-color-neutral-200);
+  border-radius: var(--mrd-border-radius);
+  cursor: pointer;
+  transition: background var(--mrd-transition-fast), border-color var(--mrd-transition-fast);
+}
+
+.mrd-document-container__action svg {
+  width: 1rem;
+  height: 1rem;
+  color: #d9a441;
+}
+
+.mrd-document-container__action:hover:not(:disabled) {
+  background: var(--mrd-color-neutral-50);
+  border-color: var(--mrd-color-neutral-300);
+}
+
+.mrd-document-container__action:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.mrd-document-container__seg {
+  display: inline-flex;
+  gap: 2px;
+  padding: 2px;
+  background: var(--mrd-color-neutral-100);
+  border-radius: var(--mrd-border-radius);
+}
+
+.mrd-document-container__seg-btn {
+  width: 1.875rem;
+  height: 1.625rem;
+  display: grid;
+  place-items: center;
+  border: none;
+  background: none;
+  border-radius: var(--mrd-border-radius-sm);
+  color: var(--mrd-color-neutral-500);
+  cursor: pointer;
+  transition: color var(--mrd-transition-fast), background var(--mrd-transition-fast);
+}
+
+.mrd-document-container__seg-btn:hover {
+  color: var(--mrd-color-neutral-800);
+}
+
+.mrd-document-container__seg-btn[aria-pressed='true'] {
+  background: var(--mrd-color-white);
+  color: var(--mrd-color-primary-dark);
+  box-shadow: var(--mrd-shadow-sm);
+}
+
+.mrd-document-container__seg-btn svg {
+  width: 1rem;
+  height: 1rem;
+}