@mmlogic/components 0.3.8 → 0.3.10

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

@@ -0,0 +1,181 @@
+:host {
+  display: block;
+}
+
+.mrd-document-list {
+  padding: var(--mrd-space-2) 0;
+}
+
+.mrd-document-list__row {
+  display: flex;
+  align-items: center;
+  gap: var(--mrd-space-2);
+  height: 2.125rem;
+  padding: 0 var(--mrd-space-4);
+  cursor: pointer;
+  user-select: none;
+  font-size: var(--mrd-font-size-sm);
+  color: var(--mrd-color-neutral-800);
+}
+
+.mrd-document-list__row:hover {
+  background: var(--mrd-color-neutral-50);
+}
+
+.mrd-document-list__row--selected {
+  background: var(--mrd-color-primary-50, rgba(22, 163, 74, 0.1));
+}
+
+.mrd-document-list__row--selected:hover {
+  background: var(--mrd-color-primary-50, rgba(22, 163, 74, 0.1));
+}
+
+.mrd-document-list__row--pending .mrd-document-list__label {
+  font-style: italic;
+  color: var(--mrd-color-neutral-500);
+}
+
+.mrd-document-list__row--doc {
+  cursor: grab;
+}
+
+.mrd-document-list__row--doc:active {
+  cursor: grabbing;
+}
+
+.mrd-document-list__row--drop {
+  background: var(--mrd-color-primary-50, rgba(22, 163, 74, 0.1));
+  box-shadow: inset 0 0 0 1px var(--mrd-color-primary);
+}
+
+.mrd-document-list__row--drop:hover {
+  background: var(--mrd-color-primary-50, rgba(22, 163, 74, 0.1));
+}
+
+.mrd-document-list__row--edit {
+  cursor: default;
+}
+
+.mrd-document-list__name-input {
+  flex: 1;
+  min-width: 0;
+  height: 1.625rem;
+  padding: 0 var(--mrd-space-2);
+  font-size: var(--mrd-font-size-sm);
+  font-family: inherit;
+  color: var(--mrd-color-neutral-800);
+  border: 1px solid var(--mrd-color-primary);
+  border-radius: var(--mrd-border-radius);
+  outline: none;
+  box-shadow: var(--mrd-shadow-focus);
+}
+
+.mrd-document-list__error {
+  font-size: var(--mrd-font-size-xs);
+  color: var(--mrd-color-danger, #dc2626);
+  padding-top: 0.125rem;
+  padding-bottom: 0.25rem;
+}
+
+.mrd-document-list__row--dossier .mrd-document-list__label {
+  font-weight: var(--mrd-font-weight-semibold);
+}
+
+.mrd-document-list__indent {
+  flex: none;
+}
+
+.mrd-document-list__chev {
+  width: 1rem;
+  height: 1rem;
+  flex: none;
+  display: grid;
+  place-items: center;
+  color: var(--mrd-color-neutral-400);
+  transition: transform var(--mrd-transition-fast);
+}
+
+.mrd-document-list__chev svg {
+  width: 0.6875rem;
+  height: 0.6875rem;
+}
+
+.mrd-document-list__chev--open {
+  transform: rotate(90deg);
+}
+
+.mrd-document-list__chev--leaf {
+  visibility: hidden;
+}
+
+.mrd-document-list__icon {
+  width: 1.0625rem;
+  height: 1.0625rem;
+  flex: none;
+}
+
+.mrd-document-list__icon--dossier {
+  color: var(--mrd-color-primary);
+}
+
+.mrd-document-list__icon--folder {
+  color: #d9a441;
+}
+
+.mrd-document-list__icon--doc {
+  color: var(--mrd-color-neutral-400);
+}
+
+.mrd-document-list__label {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.mrd-document-list__count {
+  flex: none;
+  font-family: var(--mrd-font-family-mono);
+  font-size: var(--mrd-font-size-xs);
+  color: var(--mrd-color-neutral-500);
+  background: var(--mrd-color-neutral-100);
+  border-radius: var(--mrd-border-radius-full);
+  padding: 0.0625rem 0.5rem;
+}
+
+.mrd-document-list__date {
+  flex: none;
+  font-size: var(--mrd-font-size-xs);
+  color: var(--mrd-color-neutral-400);
+  font-variant-numeric: tabular-nums;
+}
+
+.mrd-document-list__loading {
+  display: flex;
+  align-items: center;
+  gap: var(--mrd-space-2);
+  height: 1.875rem;
+  padding: 0 var(--mrd-space-4);
+  font-size: var(--mrd-font-size-xs);
+  color: var(--mrd-color-neutral-400);
+}
+
+.mrd-document-list__spinner {
+  width: 0.75rem;
+  height: 0.75rem;
+  border: 2px solid var(--mrd-color-neutral-300);
+  border-top-color: var(--mrd-color-primary);
+  border-radius: 50%;
+  animation: mrd-document-list-spin 0.7s linear infinite;
+}
+
+@keyframes mrd-document-list-spin {
+  to { transform: rotate(360deg); }
+}
+
+.mrd-document-list__empty {
+  padding: var(--mrd-space-8) var(--mrd-space-4);
+  text-align: center;
+  color: var(--mrd-color-neutral-400);
+  font-size: var(--mrd-font-size-sm);
+}

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

@@ -0,0 +1,177 @@
+import { Host, h } from "@stencil/core";
+import { t } from "../../utils/i18n";
+import { formatDate } from "../../utils/format";
+/**
+ * Archetype-driven single-document view. Given a `commons.document` binding and a
+ * data record, renders the document recognisably — title, file preview/download,
+ * summary and date — plus a navigation link to the container (the dossier),
+ * instead of a generic field form.
+ *
+ * The component keys on the slot→field map (`archetype.slots`) to locate values:
+ * value slots read `data[field]`; the `container` relation slot reads
+ * `data._links[field]` (`{ href, name }`). Empty slots are omitted.
+ */
+export class MrdDocumentView {
+    constructor() {
+        /** The data record from the /data endpoint. Fields keyed by name; relations under `_links`. */
+        this.data = {};
+        this.locale = navigator.language;
+    }
+    /** Value of a value-slot: reads data[field] via the slot→field map. */
+    slotValue(slot) {
+        var _a, _b;
+        const field = (_b = (_a = this.archetype) === null || _a === void 0 ? void 0 : _a.slots) === null || _b === void 0 ? void 0 : _b[slot];
+        if (!field)
+            return undefined;
+        return this.data[field];
+    }
+    /** Relation link for a relation-slot: reads data._links[field]. */
+    slotLink(slot) {
+        var _a, _b, _c, _d;
+        const field = (_b = (_a = this.archetype) === null || _a === void 0 ? void 0 : _a.slots) === null || _b === void 0 ? void 0 : _b[slot];
+        if (!field)
+            return undefined;
+        const links = ((_d = (_c = this.data) === null || _c === void 0 ? void 0 : _c._links) !== null && _d !== void 0 ? _d : {});
+        return links[field];
+    }
+    renderContainer() {
+        const link = this.slotLink('container');
+        if (!(link === null || link === void 0 ? void 0 : link.href) || !link.name)
+            return null;
+        return (h("button", { class: "mrd-document-view__crumb", onClick: () => this.mrdNavigate.emit({ href: link.href, label: link.name }) }, h("svg", { class: "mrd-document-view__crumb-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M19 12H5M12 19l-7-7 7-7" })), link.name));
+    }
+    renderFile() {
+        var _a, _b;
+        const raw = this.slotValue('file');
+        if (!raw)
+            return null;
+        const href = (_a = raw === null || raw === void 0 ? void 0 : raw.href) !== null && _a !== void 0 ? _a : '';
+        const fileName = (_b = raw === null || raw === void 0 ? void 0 : raw.fileName) !== null && _b !== void 0 ? _b : String(raw);
+        return (h("div", { class: "mrd-document-view__file" }, h("div", { class: "mrd-document-view__file-preview", "aria-hidden": "true" }, h("svg", { viewBox: "0 0 24 24", fill: "currentColor" }, h("path", { d: "M6 2a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6H6zm7 1.5L18.5 9H13V3.5z" }))), h("div", { class: "mrd-document-view__file-meta" }, h("span", { class: "mrd-document-view__file-name" }, fileName)), href && (h("button", { class: "mrd-document-view__download", onClick: () => this.mrdDownload.emit({ href, fileName }) }, 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: "M12 3v12m0 0l-4-4m4 4l4-4M4 21h16" })), t('download', this.locale)))));
+    }
+    render() {
+        const titleRaw = this.slotValue('title');
+        const title = titleRaw != null && titleRaw !== '' ? String(titleRaw) : null;
+        const dateRaw = this.slotValue('date');
+        const date = dateRaw != null && dateRaw !== '' ? formatDate(dateRaw, this.locale) : null;
+        const summaryRaw = this.slotValue('summary');
+        const summary = summaryRaw != null && summaryRaw !== '' ? String(summaryRaw) : null;
+        return (h(Host, { key: '0a2071925ecdb21738376d66fa4babf4590e694c' }, h("div", { key: 'a2d29c0b6e211cab142adc780466bc885a602e96', class: "mrd-document-view" }, this.renderContainer(), title && h("h1", { key: '7f5ac202c21bc8a70f0dd15e2e1fa06e651b5bce', class: "mrd-document-view__title" }, title), date && h("p", { key: 'b1dce94d5fd8bfd5e078644f631a38f91b87e7ff', class: "mrd-document-view__date" }, date), this.renderFile(), summary && (h("div", { key: '588b9ca40a49ae9ea303852620bde75333b440ab', class: "mrd-document-view__summary" }, h("div", { key: 'd3b8adb85ac346b72451e789c10aedd539c966de', class: "mrd-document-view__summary-body", innerHTML: summary }))))));
+    }
+    static get is() { return "mrd-document-view"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["mrd-document-view.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["mrd-document-view.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "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
+            },
+            "data": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Record<string, unknown>",
+                    "resolved": "string | unknown",
+                    "references": {
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The data record from the /data endpoint. Fields keyed by name; relations under `_links`."
+                },
+                "getter": false,
+                "setter": false,
+                "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 events() {
+        return [{
+                "method": "mrdNavigate",
+                "name": "mrdNavigate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Navigate to the container (dossier). Host resolves the href and routes."
+                },
+                "complexType": {
+                    "original": "{ href?: string; label: string }",
+                    "resolved": "{ href?: string | undefined; label: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "mrdDownload",
+                "name": "mrdDownload",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Download the document file. Host resolves the href to a signed URL."
+                },
+                "complexType": {
+                    "original": "{ href: string; fileName: string }",
+                    "resolved": "{ href: string; fileName: string; }",
+                    "references": {}
+                }
+            }];
+    }
+}

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

@@ -0,0 +1,121 @@
+:host {
+  display: block;
+}
+
+.mrd-document-view {
+  max-width: 720px;
+}
+
+.mrd-document-view__crumb {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--mrd-space-2);
+  margin-bottom: var(--mrd-space-4);
+  padding: var(--mrd-space-1) var(--mrd-space-3);
+  background: var(--mrd-color-primary-light);
+  border: 1px solid transparent;
+  border-radius: var(--mrd-border-radius);
+  font-family: var(--mrd-font-family);
+  font-size: var(--mrd-font-size-sm);
+  color: var(--mrd-color-primary-dark);
+  cursor: pointer;
+}
+
+.mrd-document-view__crumb:hover {
+  border-color: var(--mrd-color-primary);
+}
+
+.mrd-document-view__crumb-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+  flex-shrink: 0;
+}
+
+.mrd-document-view__title {
+  font-size: var(--mrd-font-size-2xl);
+  font-weight: var(--mrd-font-weight-bold);
+  color: var(--mrd-color-neutral-900);
+  letter-spacing: -0.02em;
+  margin: 0 0 var(--mrd-space-1) 0;
+}
+
+.mrd-document-view__date {
+  font-size: var(--mrd-font-size-sm);
+  color: var(--mrd-color-neutral-400);
+  font-variant-numeric: tabular-nums;
+  margin: 0 0 var(--mrd-space-6) 0;
+}
+
+.mrd-document-view__file {
+  display: flex;
+  align-items: center;
+  gap: var(--mrd-space-4);
+  padding: var(--mrd-space-4);
+  border: 1px solid var(--mrd-border-color);
+  border-radius: var(--mrd-border-radius-md);
+  background: var(--mrd-color-neutral-50);
+  margin-bottom: var(--mrd-space-6);
+}
+
+.mrd-document-view__file-preview {
+  width: 2.875rem;
+  height: 3.625rem;
+  flex-shrink: 0;
+  display: grid;
+  place-items: center;
+  border-radius: var(--mrd-border-radius-sm);
+  background: var(--mrd-color-white);
+  border: 1px solid var(--mrd-border-color);
+  color: var(--mrd-color-danger);
+  box-shadow: var(--mrd-shadow-sm);
+}
+
+.mrd-document-view__file-preview svg {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.mrd-document-view__file-meta {
+  flex: 1;
+  min-width: 0;
+}
+
+.mrd-document-view__file-name {
+  font-weight: var(--mrd-font-weight-semibold);
+  font-size: var(--mrd-font-size-sm);
+  color: var(--mrd-color-neutral-800);
+  word-break: break-word;
+}
+
+.mrd-document-view__download {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--mrd-space-2);
+  flex-shrink: 0;
+  height: 2rem;
+  padding: 0 var(--mrd-space-3);
+  background: var(--mrd-color-white);
+  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);
+  font-weight: var(--mrd-font-weight-medium);
+  color: var(--mrd-color-neutral-700);
+  cursor: pointer;
+}
+
+.mrd-document-view__download:hover {
+  background: var(--mrd-color-neutral-100);
+  color: var(--mrd-color-neutral-900);
+}
+
+.mrd-document-view__download svg {
+  width: 0.9375rem;
+  height: 0.9375rem;
+}
+
+.mrd-document-view__summary-body {
+  font-size: var(--mrd-font-size-base);
+  color: var(--mrd-color-neutral-700);
+  line-height: var(--mrd-line-height-relaxed);
+}

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

@@ -31,7 +31,7 @@ export class MrdEmailField {
     }
     render() {
         const hasError = !!this.error;
-        return (h(Host, { key: '851ec092957ab86e811b292eaabe29d04a600fe0' }, h("div", { key: '2d8969d60378f3161656369494549d682de8ec0e', class: "mrd-email-field" }, this.label && (h("label", { key: '7a35cc60d4804097e1a54f984c7da1829f6bbd11', class: `mrd-email-field__label${this.required ? ' mrd-email-field__label--required' : ''}` }, this.label)), h("input", { key: '1fc20e860aa021886f7ed522c3a0c8dd2cb1e093', class: `mrd-email-field__input${hasError ? ' mrd-email-field__input--error' : ''}`, type: "email", name: this.name, value: this.value, placeholder: this.placeholder || 'name@example.com', required: this.required, disabled: this.disabled, onInput: this.handleInput, onBlur: this.handleBlur }), hasError && h("span", { key: 'a44b3b41b7cd6b8c643cc64e6aadd884a2ba4961', class: "mrd-email-field__error" }, this.error))));
+        return (h(Host, { key: '0d442ab2a711c26c83fcdbf0fd8cd006d8dd8649' }, h("div", { key: 'ceb2a80679514c4c5b888fe096c90ed6cc973f64', class: "mrd-email-field" }, this.label && (h("label", { key: '663f95eff1002ee56cfc3104514bf31b47e26750', class: `mrd-email-field__label${this.required ? ' mrd-email-field__label--required' : ''}` }, this.label)), h("input", { key: '42dbdec25a47b37cfd68d00d0b8a481f96fe8241', class: `mrd-email-field__input${hasError ? ' mrd-email-field__input--error' : ''}`, type: "email", name: this.name, value: this.value, placeholder: this.placeholder || 'name@example.com', required: this.required, disabled: this.disabled, onInput: this.handleInput, onBlur: this.handleBlur }), hasError && h("span", { key: '626ee856ceaa7051fb9dd1de8b7cbd708e83f617', class: "mrd-email-field__error" }, this.error))));
     }
     static get is() { return "mrd-email-field"; }
     static get encapsulation() { return "scoped"; }

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

@@ -85,7 +85,7 @@ export class MrdFileField {
             hasError ? 'mrd-file-field__zone--error' : '',
             this.disabled || this.uploading ? 'mrd-file-field__zone--disabled' : '',
         ].filter(Boolean).join(' ');
-        return (h(Host, { key: '2090102df8169226c1e66f87cbc837296e4b55d4' }, h("div", { key: '7a37a09df1bfa2eaf28ed04c806ad5f7c0337bb0', class: "mrd-file-field" }, this.label && (h("label", { key: '8f1fcb8adbb66b792be902c7c548e50db99b6a53', class: `mrd-file-field__label${this.required ? ' mrd-file-field__label--required' : ''}` }, this.label)), h("div", { key: '66d992298f537b24d69ce3ead3dd229f6d124f3d', class: zoneClass, onClick: this.handleZoneClick, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("input", { key: '95ba6560e71ee08c6b2526802727b29a18cdc454', ref: el => (this.fileInputRef = el), class: "mrd-file-field__input", type: "file", name: this.name, accept: this.accept, disabled: this.disabled || this.uploading, required: this.required && !hasFile, onChange: this.handleInputChange }), hasFile ? (h("div", { class: "mrd-file-field__selected" }, this.uploading ? (h("span", { class: "mrd-file-field__spinner", "aria-label": t('loading', this.locale) })) : (h("svg", { class: "mrd-file-field__icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }), h("polyline", { points: "14 2 14 8 20 8" }))), h("span", { class: "mrd-file-field__filename" }, this.fileName), !this.uploading && (h("button", { class: "mrd-file-field__clear", type: "button", onClick: this.handleClear, "aria-label": t('clear', this.locale) }, "\u2715")))) : (h("div", { class: "mrd-file-field__prompt" }, h("svg", { class: "mrd-file-field__upload-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("polyline", { points: "16 16 12 12 8 16" }), h("line", { x1: "12", y1: "12", x2: "12", y2: "21" }), h("path", { d: "M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3" })), h("span", null, t('drop_file_here', this.locale), ' ', h("span", { class: "mrd-file-field__browse" }, t('browse', this.locale)))))), hasError && h("span", { key: 'a6020e63bebb01e31a980a903f81badd486585aa', class: "mrd-file-field__error" }, this.error))));
+        return (h(Host, { key: '095bb39f3cb1680cf5e7e51bdfd06d8eb087f237' }, h("div", { key: '7e5b5fe6e63b6530221083c8bcb82bcac59a5fe7', class: "mrd-file-field" }, this.label && (h("label", { key: 'c34723f4199371d6fe8ea87463d878b89c038590', class: `mrd-file-field__label${this.required ? ' mrd-file-field__label--required' : ''}` }, this.label)), h("div", { key: '4727667345d3cd4a5c65a431744a09f366943c13', class: zoneClass, onClick: this.handleZoneClick, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("input", { key: '45ed41c0f094dbe269561c8586e473f908cdf4a4', ref: el => (this.fileInputRef = el), class: "mrd-file-field__input", type: "file", name: this.name, accept: this.accept, disabled: this.disabled || this.uploading, required: this.required && !hasFile, onChange: this.handleInputChange }), hasFile ? (h("div", { class: "mrd-file-field__selected" }, this.uploading ? (h("span", { class: "mrd-file-field__spinner", "aria-label": t('loading', this.locale) })) : (h("svg", { class: "mrd-file-field__icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }), h("polyline", { points: "14 2 14 8 20 8" }))), h("span", { class: "mrd-file-field__filename" }, this.fileName), !this.uploading && (h("button", { class: "mrd-file-field__clear", type: "button", onClick: this.handleClear, "aria-label": t('clear', this.locale) }, "\u2715")))) : (h("div", { class: "mrd-file-field__prompt" }, h("svg", { class: "mrd-file-field__upload-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("polyline", { points: "16 16 12 12 8 16" }), h("line", { x1: "12", y1: "12", x2: "12", y2: "21" }), h("path", { d: "M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3" })), h("span", null, t('drop_file_here', this.locale), ' ', h("span", { class: "mrd-file-field__browse" }, t('browse', this.locale)))))), hasError && h("span", { key: '00ce94ead3c32ed63e903cfd9d8480084a308d84', class: "mrd-file-field__error" }, this.error))));
     }
     static get is() { return "mrd-file-field"; }
     static get encapsulation() { return "scoped"; }

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

@@ -99,7 +99,7 @@ export class MrdImageField {
             hasError ? 'mrd-image-field__zone--error' : '',
             this.disabled || this.uploading ? 'mrd-image-field__zone--disabled' : '',
         ].filter(Boolean).join(' ');
-        return (h(Host, { key: '71be4c1df559cff87280cac30be58beab3149064' }, h("div", { key: '9d0811d87068ce258aca9b2c5223a5594af9f6a3', class: "mrd-image-field" }, this.label && (h("label", { key: '63e129db968a2edfcc04fcac466d908ba4715158', class: `mrd-image-field__label${this.required ? ' mrd-image-field__label--required' : ''}` }, this.label)), h("div", { key: 'c7e560ad4dda43499707a2d1771a8eb561653a1b', class: zoneClass, onClick: this.handleZoneClick, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("input", { key: 'd325ee1aa3baccd689cc579e4cfa21abe977a575', ref: el => (this.fileInputRef = el), class: "mrd-image-field__input", type: "file", name: this.name, accept: this.accept, disabled: this.disabled || this.uploading, required: this.required && !this.previewUrl, onChange: this.handleInputChange }), this.previewUrl ? (h("div", { class: "mrd-image-field__preview-container" }, h("div", { class: "mrd-image-field__preview-thumb" }, h("img", { class: "mrd-image-field__preview", src: this.previewUrl, alt: this.fileName }), this.uploading && h("div", { class: "mrd-image-field__preview-overlay" }, h("span", { class: "mrd-image-field__spinner" }))), h("div", { class: "mrd-image-field__preview-info" }, h("span", { class: "mrd-image-field__preview-name" }, this.fileName), this.uploading && (h("span", { class: "mrd-image-field__upload-status" }, t('loading', this.locale)))), !this.uploading && (h("button", { class: "mrd-image-field__clear", type: "button", onClick: this.handleClear, "aria-label": t('clear', this.locale) }, t('remove', this.locale))))) : (h("div", { class: "mrd-image-field__prompt" }, h("svg", { class: "mrd-image-field__upload-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }), h("circle", { cx: "8.5", cy: "8.5", r: "1.5" }), h("polyline", { points: "21 15 16 10 5 21" })), h("span", null, t('drop_file_here', this.locale), ' ', h("span", { class: "mrd-image-field__browse" }, t('browse', this.locale)))))), hasError && h("span", { key: 'b0442d6f5c07ef22443194b3f1a95d2dfc409c4e', class: "mrd-image-field__error" }, this.error))));
+        return (h(Host, { key: '97db2df72839f36b7a46e153a5dd1c208c52b522' }, h("div", { key: 'c8f2d3d858f90d322d26082aaf5adb57acfc78f4', class: "mrd-image-field" }, this.label && (h("label", { key: '6625e5031ff0b7c06f76c1ea0387f1bd5c1858a4', class: `mrd-image-field__label${this.required ? ' mrd-image-field__label--required' : ''}` }, this.label)), h("div", { key: '364216e6a96e845e21c42e821fdff02bd2612ff8', class: zoneClass, onClick: this.handleZoneClick, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("input", { key: '0487706ddd9f48cda1cb0c2a178809d90674486b', ref: el => (this.fileInputRef = el), class: "mrd-image-field__input", type: "file", name: this.name, accept: this.accept, disabled: this.disabled || this.uploading, required: this.required && !this.previewUrl, onChange: this.handleInputChange }), this.previewUrl ? (h("div", { class: "mrd-image-field__preview-container" }, h("div", { class: "mrd-image-field__preview-thumb" }, h("img", { class: "mrd-image-field__preview", src: this.previewUrl, alt: this.fileName }), this.uploading && h("div", { class: "mrd-image-field__preview-overlay" }, h("span", { class: "mrd-image-field__spinner" }))), h("div", { class: "mrd-image-field__preview-info" }, h("span", { class: "mrd-image-field__preview-name" }, this.fileName), this.uploading && (h("span", { class: "mrd-image-field__upload-status" }, t('loading', this.locale)))), !this.uploading && (h("button", { class: "mrd-image-field__clear", type: "button", onClick: this.handleClear, "aria-label": t('clear', this.locale) }, t('remove', this.locale))))) : (h("div", { class: "mrd-image-field__prompt" }, h("svg", { class: "mrd-image-field__upload-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }), h("circle", { cx: "8.5", cy: "8.5", r: "1.5" }), h("polyline", { points: "21 15 16 10 5 21" })), h("span", null, t('drop_file_here', this.locale), ' ', h("span", { class: "mrd-image-field__browse" }, t('browse', this.locale)))))), hasError && h("span", { key: 'bd505ef4f4b67c4e9138d8825c6e600f583f4cab', class: "mrd-image-field__error" }, this.error))));
     }
     static get is() { return "mrd-image-field"; }
     static get encapsulation() { return "scoped"; }