@mmlogic/components 0.3.5 → 0.3.9

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

@@ -0,0 +1,126 @@
+: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--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: 'b6c2dbc45d5cfe551ac16b43b1a152a0d793b794' }, h("div", { key: 'df70848b4aa54ea414ea5d577a600779ee002b13', class: "mrd-document-view" }, this.renderContainer(), title && h("h1", { key: '46ff550fccd6de02972c6ee77b3cd5e7e394481a', class: "mrd-document-view__title" }, title), date && h("p", { key: '501c75cfc78722bd486d4a1db366675a1c519264', class: "mrd-document-view__date" }, date), this.renderFile(), summary && (h("div", { key: 'ee4475d06e5ca81a760e0c9e1e4b5f32ed894d89', class: "mrd-document-view__summary" }, h("div", { key: '9d196abdcc56b84b2b07203d7e5167be196a342a', 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: 'bf888feadb6585a845f6d610165e192e342be5d2' }, h("div", { key: 'ab43101242a92df1643d218c0d35bb7b80452fef', class: "mrd-email-field" }, this.label && (h("label", { key: '854c9bd733f5803616ab8b70f0316a7a8a82ffd4', class: `mrd-email-field__label${this.required ? ' mrd-email-field__label--required' : ''}` }, this.label)), h("input", { key: '39ed16119a2329fdc67db578dcc7bafc35f4acf0', 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: 'c5881e21a2314e5d339464b16982add69be9f68a', 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: '424a55ff5c141a51ed2e253a126e0046808cf1b1' }, h("div", { key: '49407e31c019a27bbaa3ccbc81cd4597d992d03a', class: "mrd-file-field" }, this.label && (h("label", { key: '0477b203f2b8df03cf9d11153bc547e9490800f7', class: `mrd-file-field__label${this.required ? ' mrd-file-field__label--required' : ''}` }, this.label)), h("div", { key: 'aff3e5f258cfa8320150048af0b0087081cbbc13', class: zoneClass, onClick: this.handleZoneClick, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("input", { key: 'ee4366f0c4b8871524288ca47c98b4749def0b81', 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: 'b67b7770e194843a1b75caaff807ea14d62eba6a', 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: '105ebf20023291a1e5c8524eedba4f04573943cd' }, h("div", { key: '59e6fe3b81c2ec1c07db7aaba819d79d2525b21f', class: "mrd-image-field" }, this.label && (h("label", { key: '2f3815ad6fe3f35932a8cc4d625751935272b629', class: `mrd-image-field__label${this.required ? ' mrd-image-field__label--required' : ''}` }, this.label)), h("div", { key: '8b45fbf8d0a229110a53068620a316ab6d48dbb8', class: zoneClass, onClick: this.handleZoneClick, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("input", { key: 'b6039e85f3f456e7c8d8e7d4db29e111a7f6d8d9', 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: 'f53ade0f627f3c840bc133690d40034c12665b5c', class: "mrd-image-field__error" }, this.error))));
     }
     static get is() { return "mrd-image-field"; }
     static get encapsulation() { return "scoped"; }