@mmlogic/components 0.3.4 → 0.3.6

package/dist/mosterdcomponents/mrd-image-field.entry.js

@@ -0,0 +1,122 @@
+import { r as registerInstance, a as createEvent, h, d as Host } from './index-B_tPFIvS.js';
+import { t } from './i18n-hoGGKbKU.js';
+
+const mrdImageFieldScss = () => `.sc-mrd-image-field-h{display:block}.mrd-image-field.sc-mrd-image-field{display:flex;flex-direction:column;gap:var(--mrd-space-1);width:100%}.mrd-image-field__label.sc-mrd-image-field{display:block;font-family:var(--mrd-font-family);font-size:var(--mrd-label-font-size);font-weight:var(--mrd-label-font-weight);color:var(--mrd-label-color)}.mrd-image-field__label--required.sc-mrd-image-field::after{content:' *';color:var(--mrd-color-danger)}.mrd-image-field__zone.sc-mrd-image-field{display:flex;align-items:center;justify-content:center;border:2px dashed var(--mrd-border-color);border-radius:var(--mrd-border-radius-md);background-color:var(--mrd-color-neutral-50);cursor:pointer;transition:border-color var(--mrd-transition), background-color var(--mrd-transition);min-height:100px;position:relative}.mrd-image-field__zone.sc-mrd-image-field:hover{border-color:var(--mrd-color-primary);background-color:var(--mrd-color-primary-light)}.mrd-image-field__zone--dragging.sc-mrd-image-field{border-color:var(--mrd-color-primary);background-color:var(--mrd-color-primary-light)}.mrd-image-field__zone--error.sc-mrd-image-field{border-color:var(--mrd-border-color-error)}.mrd-image-field__zone--disabled.sc-mrd-image-field{opacity:0.6;cursor:not-allowed}.mrd-image-field__zone--disabled.sc-mrd-image-field:hover{border-color:var(--mrd-border-color);background-color:var(--mrd-color-neutral-50)}.mrd-image-field__input.sc-mrd-image-field{position:absolute;inset:0;opacity:0;width:100%;height:100%;pointer-events:none}.mrd-image-field__prompt.sc-mrd-image-field{display:flex;flex-direction:column;align-items:center;gap:var(--mrd-space-2);padding:var(--mrd-space-6);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);color:var(--mrd-color-neutral-500);text-align:center}.mrd-image-field__upload-icon.sc-mrd-image-field{width:40px;height:40px;color:var(--mrd-color-neutral-400)}.mrd-image-field__browse.sc-mrd-image-field{color:var(--mrd-color-primary);font-weight:var(--mrd-font-weight-medium);text-decoration:underline}.mrd-image-field__preview-container.sc-mrd-image-field{display:flex;align-items:center;gap:var(--mrd-space-4);padding:var(--mrd-space-4);width:100%}.mrd-image-field__preview-thumb.sc-mrd-image-field{flex-shrink:0;width:80px;height:80px;border-radius:var(--mrd-border-radius);overflow:hidden;border:var(--mrd-border-width) solid var(--mrd-border-color);background-color:var(--mrd-color-neutral-100)}.mrd-image-field__preview.sc-mrd-image-field{width:100%;height:100%;object-fit:cover;display:block}.mrd-image-field__preview-info.sc-mrd-image-field{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--mrd-space-1)}.mrd-image-field__preview-name.sc-mrd-image-field{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-800);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mrd-image-field__preview-overlay.sc-mrd-image-field{position:absolute;inset:0;background:rgb(255 255 255 / 0.7);display:flex;align-items:center;justify-content:center;border-radius:var(--mrd-border-radius)}.mrd-image-field__spinner.sc-mrd-image-field{display:inline-block;width:24px;height:24px;border:2px solid var(--mrd-color-neutral-300);border-top-color:var(--mrd-color-primary);border-radius:50%;animation:mrd-image-spin 0.6s linear infinite}@keyframes mrd-image-spin{to{transform:rotate(360deg)}}.mrd-image-field__upload-status.sc-mrd-image-field{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-xs);color:var(--mrd-color-neutral-500)}.mrd-image-field__clear.sc-mrd-image-field{flex-shrink:0;background-color:var(--mrd-color-white);color:var(--mrd-color-danger);border:var(--mrd-border-width) solid var(--mrd-color-danger);border-radius:var(--mrd-border-radius);padding:var(--mrd-space-1) var(--mrd-space-3);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);font-weight:var(--mrd-font-weight-medium);cursor:pointer;transition:background-color var(--mrd-transition), color var(--mrd-transition)}.mrd-image-field__clear.sc-mrd-image-field:hover{background-color:var(--mrd-color-danger);color:var(--mrd-color-white)}.mrd-image-field__error.sc-mrd-image-field{font-family:var(--mrd-font-family);font-size:var(--mrd-error-font-size);color:var(--mrd-error-color)}`;
+
+const MrdImageField = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.mrdChange = createEvent(this, "mrdChange", 7);
+        this.mrdBlur = createEvent(this, "mrdBlur", 7);
+        this.mrdUpload = createEvent(this, "mrdUpload", 7);
+        this.name = '';
+        this.label = '';
+        this.value = null;
+        this.required = false;
+        this.disabled = false;
+        this.locale = navigator.language;
+        this.accept = 'image/*';
+        this.maxSize = 0;
+        this.previewUrl = '';
+        this.fileName = '';
+        this.isDragging = false;
+        this.uploading = false;
+        this.error = '';
+        this.handleInputChange = (e) => {
+            var _a;
+            const files = e.target.files;
+            this.handleFile((_a = files === null || files === void 0 ? void 0 : files[0]) !== null && _a !== void 0 ? _a : null);
+        };
+        this.handleDragOver = (e) => {
+            e.preventDefault();
+            this.isDragging = true;
+        };
+        this.handleDragLeave = () => {
+            this.isDragging = false;
+        };
+        this.handleDrop = (e) => {
+            var _a, _b, _c;
+            e.preventDefault();
+            this.isDragging = false;
+            const file = (_c = (_b = (_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : null;
+            this.handleFile(file);
+        };
+        this.handleZoneClick = () => {
+            var _a;
+            if (!this.disabled && !this.uploading) {
+                (_a = this.fileInputRef) === null || _a === void 0 ? void 0 : _a.click();
+            }
+        };
+        this.handleClear = (e) => {
+            e.stopPropagation();
+            this.previewUrl = '';
+            this.fileName = '';
+            this.error = '';
+            this.uploading = false;
+            if (this.fileInputRef)
+                this.fileInputRef.value = '';
+            this.mrdChange.emit({ name: this.name, value: null });
+        };
+    }
+    /** When the host provides a URI back via setFieldValue, the upload is done. */
+    valueChanged(newVal) {
+        if (typeof newVal === 'string' && newVal) {
+            this.uploading = false;
+        }
+        else if (!newVal) {
+            this.uploading = false;
+            this.previewUrl = '';
+            this.fileName = '';
+        }
+    }
+    handleFile(file) {
+        if (!file) {
+            this.previewUrl = '';
+            this.fileName = '';
+            this.uploading = false;
+            this.mrdChange.emit({ name: this.name, value: null });
+            return;
+        }
+        if (this.maxSize > 0 && file.size > this.maxSize) {
+            this.error = t('file_too_large', this.locale);
+            return;
+        }
+        if (!file.type.startsWith('image/')) {
+            this.error = 'Please select an image file';
+            return;
+        }
+        this.error = '';
+        this.fileName = file.name;
+        this.uploading = true;
+        // Show local preview immediately while upload is in progress
+        const reader = new FileReader();
+        reader.onload = (ev) => {
+            var _a;
+            this.previewUrl = (_a = ev.target) === null || _a === void 0 ? void 0 : _a.result;
+        };
+        reader.readAsDataURL(file);
+        this.mrdChange.emit({ name: this.name, value: file });
+        this.mrdUpload.emit({ name: this.name, file });
+    }
+    render() {
+        const hasError = !!this.error;
+        const zoneClass = [
+            'mrd-image-field__zone',
+            this.isDragging ? 'mrd-image-field__zone--dragging' : '',
+            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))));
+    }
+    static get watchers() { return {
+        "value": [{
+                "valueChanged": 0
+            }]
+    }; }
+};
+MrdImageField.style = mrdImageFieldScss();
+
+export { MrdImageField as mrd_image_field };
+//# sourceMappingURL=mrd-image-field.entry.esm.js.map
+
+//# sourceMappingURL=mrd-image-field.entry.js.map

package/dist/mosterdcomponents/mrd-image-field.entry.js.map

@@ -0,0 +1 @@
+{"file":"mrd-image-field.entry.js","mappings":";;;AAAA,MAAM,iBAAiB,GAAG,MAAM,CAAC,utIAAutI,CAAC;;MCQ5uI,aAAa,GAAA,MAAA;AAL1B,IAAA,WAAA,CAAA,OAAA,EAAA;;;;;AAMU,QAAA,IAAA,CAAA,IAAI,GAAW,EAAE;AACjB,QAAA,IAAA,CAAA,KAAK,GAAW,EAAE;AAClB,QAAA,IAAA,CAAA,KAAK,GAAY,IAAI;AACrB,QAAA,IAAA,CAAA,QAAQ,GAAY,KAAK;AACzB,QAAA,IAAA,CAAA,QAAQ,GAAY,KAAK;AACzB,QAAA,IAAA,CAAA,MAAM,GAAW,SAAS,CAAC,QAAQ;AACnC,QAAA,IAAA,CAAA,MAAM,GAAW,SAAS;AAC1B,QAAA,IAAA,CAAA,OAAO,GAAW,CAAC;AAElB,QAAA,IAAA,CAAA,UAAU,GAAW,EAAE;AACvB,QAAA,IAAA,CAAA,QAAQ,GAAW,EAAE;AACrB,QAAA,IAAA,CAAA,UAAU,GAAY,KAAK;AAC3B,QAAA,IAAA,CAAA,SAAS,GAAY,KAAK;AAC1B,QAAA,IAAA,CAAA,KAAK,GAAW,EAAE;AAmDnB,QAAA,IAAA,CAAA,iBAAiB,GAAG,CAAC,CAAQ,KAAI;;AACvC,YAAA,MAAM,KAAK,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK;AAClD,YAAA,IAAI,CAAC,UAAU,CAAC,CAAA,EAAA,GAAA,KAAK,KAAA,IAAA,IAAL,KAAK,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAL,KAAK,CAAG,CAAC,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAI,IAAI,CAAC;AACrC,SAAC;AAEO,QAAA,IAAA,CAAA,cAAc,GAAG,CAAC,CAAY,KAAI;YACxC,CAAC,CAAC,cAAc,EAAE;AAClB,YAAA,IAAI,CAAC,UAAU,GAAG,IAAI;AACxB,SAAC;AAEO,QAAA,IAAA,CAAA,eAAe,GAAG,MAAK;AAC7B,YAAA,IAAI,CAAC,UAAU,GAAG,KAAK;AACzB,SAAC;AAEO,QAAA,IAAA,CAAA,UAAU,GAAG,CAAC,CAAY,KAAI;;YACpC,CAAC,CAAC,cAAc,EAAE;AAClB,YAAA,IAAI,CAAC,UAAU,GAAG,KAAK;AACvB,YAAA,MAAM,IAAI,GAAG,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,MAAA,CAAC,CAAC,YAAY,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAG,CAAC,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAI,IAAI;AAC/C,YAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;AACvB,SAAC;AAEO,QAAA,IAAA,CAAA,eAAe,GAAG,MAAK;;YAC7B,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;gBACrC,CAAA,EAAA,GAAA,IAAI,CAAC,YAAY,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,KAAK,EAAE;;AAE9B,SAAC;AAEO,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,CAAa,KAAI;YACtC,CAAC,CAAC,eAAe,EAAE;AACnB,YAAA,IAAI,CAAC,UAAU,GAAG,EAAE;AACpB,YAAA,IAAI,CAAC,QAAQ,GAAG,EAAE;AAClB,YAAA,IAAI,CAAC,KAAK,GAAG,EAAE;AACf,YAAA,IAAI,CAAC,SAAS,GAAG,KAAK;YACtB,IAAI,IAAI,CAAC,YAAY;AAAE,gBAAA,IAAI,CAAC,YAAY,CAAC,KAAK,GAAG,EAAE;AACnD,YAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;AACvD,SAAC;AAyEF;;AAnJC,IAAA,YAAY,CAAC,MAAe,EAAA;AAC1B,QAAA,IAAI,OAAO,MAAM,KAAK,QAAQ,IAAI,MAAM,EAAE;AACxC,YAAA,IAAI,CAAC,SAAS,GAAG,KAAK;;aACjB,IAAI,CAAC,MAAM,EAAE;AAClB,YAAA,IAAI,CAAC,SAAS,GAAG,KAAK;AACtB,YAAA,IAAI,CAAC,UAAU,GAAG,EAAE;AACpB,YAAA,IAAI,CAAC,QAAQ,GAAG,EAAE;;;AAId,IAAA,UAAU,CAAC,IAAiB,EAAA;QAClC,IAAI,CAAC,IAAI,EAAE;AACT,YAAA,IAAI,CAAC,UAAU,GAAG,EAAE;AACpB,YAAA,IAAI,CAAC,QAAQ,GAAG,EAAE;AAClB,YAAA,IAAI,CAAC,SAAS,GAAG,KAAK;AACtB,YAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;YACrD;;AAEF,QAAA,IAAI,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,OAAO,EAAE;YAChD,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,gBAAgB,EAAE,IAAI,CAAC,MAAM,CAAC;YAC7C;;QAEF,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE;AACnC,YAAA,IAAI,CAAC,KAAK,GAAG,6BAA6B;YAC1C;;AAEF,QAAA,IAAI,CAAC,KAAK,GAAG,EAAE;AACf,QAAA,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI;AACzB,QAAA,IAAI,CAAC,SAAS,GAAG,IAAI;;AAErB,QAAA,MAAM,MAAM,GAAG,IAAI,UAAU,EAAE;AAC/B,QAAA,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,KAAI;;AACrB,YAAA,IAAI,CAAC,UAAU,GAAG,CAAA,EAAA,GAAA,EAAE,CAAC,MAAM,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,MAAgB;AAC/C,SAAC;AACD,QAAA,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC;AAC1B,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;AACrD,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,CAAC;;IAwChD,MAAM,GAAA;AACJ,QAAA,MAAM,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;AAC7B,QAAA,MAAM,SAAS,GAAG;YAChB,uBAAuB;YACvB,IAAI,CAAC,UAAU,GAAG,iCAAiC,GAAG,EAAE;AACxD,YAAA,QAAQ,GAAG,8BAA8B,GAAG,EAAE;AAC9C,YAAA,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,SAAS,GAAG,iCAAiC,GAAG,EAAE;SACzE,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;AAE3B,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,iBAAiB,EAAA,EACzB,IAAI,CAAC,KAAK,KACT,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAO,KAAK,EAAE,CAAA,sBAAA,EAAyB,IAAI,CAAC,QAAQ,GAAG,mCAAmC,GAAG,EAAE,CAAA,CAAE,EAAA,EAC9F,IAAI,CAAC,KAAK,CACL,CACT,EACD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,IAAI,CAAC,eAAe,EAC7B,UAAU,EAAE,IAAI,CAAC,cAAc,EAC/B,WAAW,EAAE,IAAI,CAAC,eAAe,EACjC,MAAM,EAAE,IAAI,CAAC,UAAU,EAAA,EAEvB,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,YAAY,GAAG,EAAsB,CAAC,EACvD,KAAK,EAAC,wBAAwB,EAC9B,IAAI,EAAC,MAAM,EACX,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,SAAS,EACzC,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,UAAU,EAC3C,QAAQ,EAAE,IAAI,CAAC,iBAAiB,EAAA,CAChC,EACD,IAAI,CAAC,UAAU,IACd,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,oCAAoC,EAAA,EAC7C,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,gCAAgC,EAAA,EACzC,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,0BAA0B,EAAC,GAAG,EAAE,IAAI,CAAC,UAAU,EAAE,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAA,CAAI,EACjF,IAAI,CAAC,SAAS,IAAI,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,kCAAkC,EAAA,EAAC,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,0BAA0B,EAAA,CAAG,CAAM,CAC5G,EACN,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,+BAA+B,EAAA,EACxC,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,+BAA+B,IAAE,IAAI,CAAC,QAAQ,CAAQ,EACjE,IAAI,CAAC,SAAS,KACb,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,gCAAgC,EAAA,EAAE,CAAC,CAAC,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,CAAQ,CAChF,CACG,EACL,CAAC,IAAI,CAAC,SAAS,KACd,CAAA,CAAA,QAAA,EAAA,EAAQ,KAAK,EAAC,wBAAwB,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,EAAA,YAAA,EAAc,CAAC,CAAC,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,EAAA,EAChH,CAAC,CAAC,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,CAClB,CACV,CACG,KAEN,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,yBAAyB,EAAA,EAClC,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,8BAA8B,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,kBAAc,GAAG,EAAA,EAC9G,CAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAA,CAAE,EACxD,CAAA,CAAA,QAAA,EAAA,EAAQ,EAAE,EAAC,KAAK,EAAC,EAAE,EAAC,KAAK,EAAC,CAAC,EAAC,KAAK,EAAA,CAAE,EACnC,CAAA,CAAA,UAAA,EAAA,EAAU,MAAM,EAAC,kBAAkB,EAAA,CAAE,CACjC,EACN,CAAA,CAAA,MAAA,EAAA,IAAA,EACG,CAAC,CAAC,gBAAgB,EAAE,IAAI,CAAC,MAAM,CAAC,EAAE,GAAG,EACtC,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,yBAAyB,EAAA,EAAE,CAAC,CAAC,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,CAAQ,CAClE,CACH,CACP,CACG,EACL,QAAQ,IAAI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,wBAAwB,EAAA,EAAE,IAAI,CAAC,KAAK,CAAQ,CACjE,CACD;;;;;;;;;;;;","names":[],"sources":["src/components/mrd-image-field/mrd-image-field.scss?tag=mrd-image-field&encapsulation=scoped","src/components/mrd-image-field/mrd-image-field.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.mrd-image-field {\n  display: flex;\n  flex-direction: column;\n  gap: var(--mrd-space-1);\n  width: 100%;\n}\n\n.mrd-image-field__label {\n  display: block;\n  font-family: var(--mrd-font-family);\n  font-size: var(--mrd-label-font-size);\n  font-weight: var(--mrd-label-font-weight);\n  color: var(--mrd-label-color);\n}\n\n.mrd-image-field__label--required::after {\n  content: ' *';\n  color: var(--mrd-color-danger);\n}\n\n.mrd-image-field__zone {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: 2px dashed var(--mrd-border-color);\n  border-radius: var(--mrd-border-radius-md);\n  background-color: var(--mrd-color-neutral-50);\n  cursor: pointer;\n  transition: border-color var(--mrd-transition), background-color var(--mrd-transition);\n  min-height: 100px;\n  position: relative;\n}\n\n.mrd-image-field__zone:hover {\n  border-color: var(--mrd-color-primary);\n  background-color: var(--mrd-color-primary-light);\n}\n\n.mrd-image-field__zone--dragging {\n  border-color: var(--mrd-color-primary);\n  background-color: var(--mrd-color-primary-light);\n}\n\n.mrd-image-field__zone--error {\n  border-color: var(--mrd-border-color-error);\n}\n\n.mrd-image-field__zone--disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.mrd-image-field__zone--disabled:hover {\n  border-color: var(--mrd-border-color);\n  background-color: var(--mrd-color-neutral-50);\n}\n\n.mrd-image-field__input {\n  position: absolute;\n  inset: 0;\n  opacity: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n\n.mrd-image-field__prompt {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--mrd-space-2);\n  padding: var(--mrd-space-6);\n  font-family: var(--mrd-font-family);\n  font-size: var(--mrd-font-size-sm);\n  color: var(--mrd-color-neutral-500);\n  text-align: center;\n}\n\n.mrd-image-field__upload-icon {\n  width: 40px;\n  height: 40px;\n  color: var(--mrd-color-neutral-400);\n}\n\n.mrd-image-field__browse {\n  color: var(--mrd-color-primary);\n  font-weight: var(--mrd-font-weight-medium);\n  text-decoration: underline;\n}\n\n/* Preview: thumbnail + bestandsnaam + verwijder knop */\n.mrd-image-field__preview-container {\n  display: flex;\n  align-items: center;\n  gap: var(--mrd-space-4);\n  padding: var(--mrd-space-4);\n  width: 100%;\n}\n\n.mrd-image-field__preview-thumb {\n  flex-shrink: 0;\n  width: 80px;\n  height: 80px;\n  border-radius: var(--mrd-border-radius);\n  overflow: hidden;\n  border: var(--mrd-border-width) solid var(--mrd-border-color);\n  background-color: var(--mrd-color-neutral-100);\n}\n\n.mrd-image-field__preview {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n}\n\n.mrd-image-field__preview-info {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: var(--mrd-space-1);\n}\n\n.mrd-image-field__preview-name {\n  font-family: var(--mrd-font-family);\n  font-size: var(--mrd-font-size-sm);\n  font-weight: var(--mrd-font-weight-medium);\n  color: var(--mrd-color-neutral-800);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.mrd-image-field__preview-overlay {\n  position: absolute;\n  inset: 0;\n  background: rgb(255 255 255 / 0.7);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--mrd-border-radius);\n}\n\n.mrd-image-field__spinner {\n  display: inline-block;\n  width: 24px;\n  height: 24px;\n  border: 2px solid var(--mrd-color-neutral-300);\n  border-top-color: var(--mrd-color-primary);\n  border-radius: 50%;\n  animation: mrd-image-spin 0.6s linear infinite;\n}\n\n@keyframes mrd-image-spin { to { transform: rotate(360deg); } }\n\n.mrd-image-field__upload-status {\n  font-family: var(--mrd-font-family);\n  font-size: var(--mrd-font-size-xs);\n  color: var(--mrd-color-neutral-500);\n}\n\n.mrd-image-field__clear {\n  flex-shrink: 0;\n  background-color: var(--mrd-color-white);\n  color: var(--mrd-color-danger);\n  border: var(--mrd-border-width) solid var(--mrd-color-danger);\n  border-radius: var(--mrd-border-radius);\n  padding: var(--mrd-space-1) var(--mrd-space-3);\n  font-family: var(--mrd-font-family);\n  font-size: var(--mrd-font-size-sm);\n  font-weight: var(--mrd-font-weight-medium);\n  cursor: pointer;\n  transition: background-color var(--mrd-transition), color var(--mrd-transition);\n}\n\n.mrd-image-field__clear:hover {\n  background-color: var(--mrd-color-danger);\n  color: var(--mrd-color-white);\n}\n\n.mrd-image-field__error {\n  font-family: var(--mrd-font-family);\n  font-size: var(--mrd-error-font-size);\n  color: var(--mrd-error-color);\n}\n","import { Component, Host, h, Prop, State, Event, EventEmitter, Watch } from '@stencil/core';\nimport { t } from '../../utils/i18n';\n\n@Component({\n  tag: 'mrd-image-field',\n  styleUrl: 'mrd-image-field.scss',\n  scoped: true,\n})\nexport class MrdImageField {\n  @Prop() name: string = '';\n  @Prop() label: string = '';\n  @Prop() value: unknown = null;\n  @Prop() required: boolean = false;\n  @Prop() disabled: boolean = false;\n  @Prop() locale: string = navigator.language;\n  @Prop() accept: string = 'image/*';\n  @Prop() maxSize: number = 0;\n\n  @State() previewUrl: string = '';\n  @State() fileName: string = '';\n  @State() isDragging: boolean = false;\n  @State() uploading: boolean = false;\n  @State() error: string = '';\n\n  @Event() mrdChange!: EventEmitter<{ name: string; value: File | null }>;\n  @Event() mrdBlur!: EventEmitter<{ name: string; value: File | null }>;\n  /** Emitted when an image is selected and needs to be uploaded.\n   *  Host should upload the file and call form.setFieldValue(name, uri) with the result. */\n  @Event() mrdUpload!: EventEmitter<{ name: string; file: File }>;\n\n  private fileInputRef!: HTMLInputElement;\n\n  /** When the host provides a URI back via setFieldValue, the upload is done. */\n  @Watch('value')\n  valueChanged(newVal: unknown) {\n    if (typeof newVal === 'string' && newVal) {\n      this.uploading = false;\n    } else if (!newVal) {\n      this.uploading = false;\n      this.previewUrl = '';\n      this.fileName = '';\n    }\n  }\n\n  private handleFile(file: File | null) {\n    if (!file) {\n      this.previewUrl = '';\n      this.fileName = '';\n      this.uploading = false;\n      this.mrdChange.emit({ name: this.name, value: null });\n      return;\n    }\n    if (this.maxSize > 0 && file.size > this.maxSize) {\n      this.error = t('file_too_large', this.locale);\n      return;\n    }\n    if (!file.type.startsWith('image/')) {\n      this.error = 'Please select an image file';\n      return;\n    }\n    this.error = '';\n    this.fileName = file.name;\n    this.uploading = true;\n    // Show local preview immediately while upload is in progress\n    const reader = new FileReader();\n    reader.onload = (ev) => {\n      this.previewUrl = ev.target?.result as string;\n    };\n    reader.readAsDataURL(file);\n    this.mrdChange.emit({ name: this.name, value: file });\n    this.mrdUpload.emit({ name: this.name, file });\n  }\n\n  private handleInputChange = (e: Event) => {\n    const files = (e.target as HTMLInputElement).files;\n    this.handleFile(files?.[0] ?? null);\n  };\n\n  private handleDragOver = (e: DragEvent) => {\n    e.preventDefault();\n    this.isDragging = true;\n  };\n\n  private handleDragLeave = () => {\n    this.isDragging = false;\n  };\n\n  private handleDrop = (e: DragEvent) => {\n    e.preventDefault();\n    this.isDragging = false;\n    const file = e.dataTransfer?.files?.[0] ?? null;\n    this.handleFile(file);\n  };\n\n  private handleZoneClick = () => {\n    if (!this.disabled && !this.uploading) {\n      this.fileInputRef?.click();\n    }\n  };\n\n  private handleClear = (e: MouseEvent) => {\n    e.stopPropagation();\n    this.previewUrl = '';\n    this.fileName = '';\n    this.error = '';\n    this.uploading = false;\n    if (this.fileInputRef) this.fileInputRef.value = '';\n    this.mrdChange.emit({ name: this.name, value: null });\n  };\n\n  render() {\n    const hasError = !!this.error;\n    const zoneClass = [\n      'mrd-image-field__zone',\n      this.isDragging ? 'mrd-image-field__zone--dragging' : '',\n      hasError ? 'mrd-image-field__zone--error' : '',\n      this.disabled || this.uploading ? 'mrd-image-field__zone--disabled' : '',\n    ].filter(Boolean).join(' ');\n\n    return (\n      <Host>\n        <div class=\"mrd-image-field\">\n          {this.label && (\n            <label class={`mrd-image-field__label${this.required ? ' mrd-image-field__label--required' : ''}`}>\n              {this.label}\n            </label>\n          )}\n          <div\n            class={zoneClass}\n            onClick={this.handleZoneClick}\n            onDragOver={this.handleDragOver}\n            onDragLeave={this.handleDragLeave}\n            onDrop={this.handleDrop}\n          >\n            <input\n              ref={el => (this.fileInputRef = el as HTMLInputElement)}\n              class=\"mrd-image-field__input\"\n              type=\"file\"\n              name={this.name}\n              accept={this.accept}\n              disabled={this.disabled || this.uploading}\n              required={this.required && !this.previewUrl}\n              onChange={this.handleInputChange}\n            />\n            {this.previewUrl ? (\n              <div class=\"mrd-image-field__preview-container\">\n                <div class=\"mrd-image-field__preview-thumb\">\n                  <img class=\"mrd-image-field__preview\" src={this.previewUrl} alt={this.fileName} />\n                  {this.uploading && <div class=\"mrd-image-field__preview-overlay\"><span class=\"mrd-image-field__spinner\" /></div>}\n                </div>\n                <div class=\"mrd-image-field__preview-info\">\n                  <span class=\"mrd-image-field__preview-name\">{this.fileName}</span>\n                  {this.uploading && (\n                    <span class=\"mrd-image-field__upload-status\">{t('loading', this.locale)}</span>\n                  )}\n                </div>\n                {!this.uploading && (\n                  <button class=\"mrd-image-field__clear\" type=\"button\" onClick={this.handleClear} aria-label={t('clear', this.locale)}>\n                    {t('remove', this.locale)}\n                  </button>\n                )}\n              </div>\n            ) : (\n              <div class=\"mrd-image-field__prompt\">\n                <svg class=\"mrd-image-field__upload-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                  <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"/>\n                  <circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"/>\n                  <polyline points=\"21 15 16 10 5 21\"/>\n                </svg>\n                <span>\n                  {t('drop_file_here', this.locale)}{' '}\n                  <span class=\"mrd-image-field__browse\">{t('browse', this.locale)}</span>\n                </span>\n              </div>\n            )}\n          </div>\n          {hasError && <span class=\"mrd-image-field__error\">{this.error}</span>}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/{collection/components/mrd-layout-section/mrd-layout-section.js → mosterdcomponents/mrd-layout-section.entry.js}

@@ -1,10 +1,21 @@
-import { Host, h } from "@stencil/core";
-import { ClientLayoutItemType, ClientLayoutItemFieldDataType, } from "../../types/client-layout";
-import { CellRenderer } from "../../utils/cell-renderer";
-import { t } from "../../utils/i18n";
-import { formatDate } from "../../utils/format";
-export class MrdLayoutSection {
-    constructor() {
+import { r as registerInstance, a as createEvent, h, d as Host, e as getElement } from './index-B_tPFIvS.js';
+import { a as ClientLayoutItemType, b as ClientLayoutItemFieldDataType } from './client-layout-D88nn5zf.js';
+import { C as CellRenderer } from './cell-renderer-CbRwLOo8.js';
+import { t } from './i18n-hoGGKbKU.js';
+import { f as formatDate } from './format-BAfsQfy1.js';
+
+const mrdLayoutSectionScss = () => `.mrd-layout-section.sc-mrd-layout-section{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);color:var(--mrd-color-neutral-800)}.mrd-layout-section__field.sc-mrd-layout-section{display:grid;grid-template-columns:200px 1fr;align-items:baseline;gap:0 var(--mrd-space-2);padding:var(--mrd-space-1) 0}.mrd-layout-section__field-label.sc-mrd-layout-section{font-size:var(--mrd-font-size-xs);font-weight:var(--mrd-font-weight-normal);color:var(--mrd-color-neutral-500);padding-top:1px}.mrd-layout-section__field-value.sc-mrd-layout-section{font-size:var(--mrd-font-size-sm);font-weight:var(--mrd-font-weight-medium);color:var(--mrd-color-neutral-800);word-break:break-word;display:inline-flex;align-items:center;gap:var(--mrd-space-1)}.mrd-layout-section__history-wrap.sc-mrd-layout-section{position:relative;display:inline-flex;align-items:center}.mrd-layout-section__history-btn.sc-mrd-layout-section{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;padding:0;background:transparent;border:none;border-radius:var(--mrd-border-radius-sm);color:var(--mrd-color-neutral-400);cursor:pointer;flex-shrink:0;transition:color var(--mrd-transition-fast), background-color var(--mrd-transition-fast)}.mrd-layout-section__history-btn.sc-mrd-layout-section:hover{color:var(--mrd-color-neutral-700);background-color:var(--mrd-color-neutral-100)}.mrd-layout-section__history-btn.sc-mrd-layout-section:focus{outline:none;box-shadow:var(--mrd-shadow-focus)}.mrd-layout-section__history-icon.sc-mrd-layout-section{width:0.875rem;height:0.875rem}.mrd-layout-section__history-popover.sc-mrd-layout-section{position:absolute;top:calc(100% + 0.25rem);left:0;min-width:24rem;max-width:24rem;background-color:var(--mrd-color-white);border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius-md);box-shadow:var(--mrd-shadow-md);padding:var(--mrd-space-1) 0;z-index:var(--mrd-z-dropdown)}.mrd-layout-section__history-entry.sc-mrd-layout-section{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);font-weight:var(--mrd-font-weight-normal);color:var(--mrd-color-neutral-700);padding:var(--mrd-space-2) var(--mrd-space-3);line-height:var(--mrd-line-height-normal)}.mrd-layout-section__history-entry.sc-mrd-layout-section:not(:last-child){border-bottom:var(--mrd-border-width) solid var(--mrd-color-neutral-100)}.mrd-layout-section__field-header.sc-mrd-layout-section{font-size:var(--mrd-font-size-2xl);font-weight:var(--mrd-font-weight-bold);color:var(--mrd-color-neutral-900);margin:0 0 var(--mrd-space-4) 0;padding:0}.mrd-layout-section__header.sc-mrd-layout-section{font-size:var(--mrd-font-size-xl);font-weight:var(--mrd-font-weight-semibold);color:var(--mrd-color-neutral-800);margin:var(--mrd-space-4) 0 var(--mrd-space-2) 0;padding:0}.mrd-layout-section__text.sc-mrd-layout-section{font-size:var(--mrd-font-size-base);color:var(--mrd-color-neutral-700);line-height:var(--mrd-line-height-relaxed);margin:var(--mrd-space-2) 0}.mrd-layout-section__navigate.sc-mrd-layout-section{display:inline-flex;align-items:center;gap:var(--mrd-space-2);padding:var(--mrd-space-2) var(--mrd-space-3);background:none;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);color:var(--mrd-color-primary);cursor:pointer;margin:var(--mrd-space-2) 0}.mrd-layout-section__navigate.sc-mrd-layout-section:hover{background-color:var(--mrd-color-primary-light);border-color:var(--mrd-color-primary)}.mrd-layout-section__link.sc-mrd-layout-section{color:var(--mrd-color-primary);text-decoration:none}.mrd-layout-section__link.sc-mrd-layout-section:hover{text-decoration:underline}.mrd-layout-section__relation-link.sc-mrd-layout-section{background:none;border:none;padding:0;font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);font-weight:var(--mrd-font-weight-semibold);color:var(--mrd-color-primary);cursor:pointer;text-align:left}.mrd-layout-section__relation-link.sc-mrd-layout-section:hover{text-decoration:underline}.mrd-layout-section__download-link.sc-mrd-layout-section{display:inline-flex;align-items:center;gap:var(--mrd-space-1);background:none;border:none;padding:0;font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);color:var(--mrd-color-primary);cursor:pointer;text-align:left}.mrd-layout-section__download-link.sc-mrd-layout-section:hover{text-decoration:underline;color:var(--mrd-color-primary-dark)}.mrd-layout-section__file-icon.sc-mrd-layout-section{flex-shrink:0;width:1rem;height:1rem}.mrd-layout-section__boolean--true.sc-mrd-layout-section{color:var(--mrd-color-success);font-weight:var(--mrd-font-weight-semibold)}.mrd-layout-section__boolean--false.sc-mrd-layout-section{color:var(--mrd-color-neutral-400)}.mrd-layout-section__field--block.sc-mrd-layout-section{grid-template-columns:1fr}.mrd-layout-section__badge.sc-mrd-layout-section{display:inline-block;font-size:var(--mrd-font-size-xs);font-weight:var(--mrd-font-weight-medium);padding:2px var(--mrd-space-3);border-radius:10px}.mrd-layout-section__badge-dot-row.sc-mrd-layout-section{display:inline-flex;align-items:center;gap:var(--mrd-space-2)}.mrd-layout-section__badge-dot.sc-mrd-layout-section{display:inline-block;width:10px;height:10px;border-radius:50%;flex-shrink:0}.mrd-layout-section__secret-masked.sc-mrd-layout-section{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);color:var(--mrd-label-color);letter-spacing:0.15em;user-select:none;pointer-events:none}.mrd-layout-section__pre.sc-mrd-layout-section{font-family:var(--mrd-font-family-mono);font-size:var(--mrd-font-size-xs);background-color:var(--mrd-color-neutral-50);border:1px solid var(--mrd-color-neutral-200);border-radius:var(--mrd-border-radius);padding:var(--mrd-space-3);margin:0;max-height:calc(10 * 1.5 * var(--mrd-font-size-xs));overflow-x:auto;overflow-y:auto;white-space:pre-wrap;word-break:break-word}.mrd-layout-section__group.sc-mrd-layout-section{margin:var(--mrd-space-4) 0}.mrd-layout-section__group-title.sc-mrd-layout-section{font-size:var(--mrd-font-size-sm);font-weight:var(--mrd-font-weight-semibold);color:var(--mrd-color-neutral-500);margin:0 0 var(--mrd-space-2) 0;padding-bottom:0;text-transform:uppercase;letter-spacing:0.05em}.mrd-layout-section__related-view.sc-mrd-layout-section{margin:var(--mrd-space-4) 0}.mrd-layout-section__related-view-title.sc-mrd-layout-section{font-size:var(--mrd-font-size-lg);font-weight:var(--mrd-font-weight-semibold);color:var(--mrd-color-neutral-800);margin:0 0 var(--mrd-space-3) 0}.mrd-layout-section__search.sc-mrd-layout-section{position:relative;margin:var(--mrd-space-2) 0}.mrd-layout-section__search-wrap.sc-mrd-layout-section{position:relative}.mrd-layout-section__search-icon.sc-mrd-layout-section{position:absolute;left:var(--mrd-input-padding-x);top:50%;transform:translateY(-50%);width:1rem;height:1rem;color:var(--mrd-color-neutral-400);pointer-events:none}.mrd-layout-section__search-input.sc-mrd-layout-section{display:block;width:100%;height:var(--mrd-input-height);padding:var(--mrd-input-padding-y) var(--mrd-input-padding-x) var(--mrd-input-padding-y) calc(var(--mrd-input-padding-x) + 1rem + var(--mrd-space-2));font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);color:var(--mrd-input-color);background-color:var(--mrd-input-bg);border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);outline:none;appearance:none;box-sizing:border-box}.mrd-layout-section__search-input.sc-mrd-layout-section:focus{border-color:var(--mrd-border-color-focus);box-shadow:var(--mrd-shadow-focus)}.mrd-layout-section__search-input.sc-mrd-layout-section::placeholder{color:var(--mrd-input-placeholder-color)}.mrd-layout-section__search-results.sc-mrd-layout-section{position:absolute;top:100%;left:0;right:0;background-color:var(--mrd-color-white);border:1px solid var(--mrd-color-neutral-300);border-top:none;border-radius:0 0 var(--mrd-border-radius) var(--mrd-border-radius);box-shadow:var(--mrd-shadow-sm);z-index:100;max-height:300px;overflow-y:auto;list-style:none;margin:0;padding:var(--mrd-space-1) 0}.mrd-layout-section__search-result.sc-mrd-layout-section{margin:0;padding:0}.mrd-layout-section__search-result-btn.sc-mrd-layout-section{display:flex;flex-direction:column;width:100%;padding:var(--mrd-space-2) var(--mrd-space-3);background:none;border:none;text-align:left;cursor:pointer;font-family:var(--mrd-font-family)}.mrd-layout-section__search-result-btn.sc-mrd-layout-section:hover{background-color:var(--mrd-color-primary-light)}.mrd-layout-section__search-result-label.sc-mrd-layout-section{font-size:var(--mrd-font-size-sm);font-weight:var(--mrd-font-weight-medium);color:var(--mrd-color-neutral-800)}.mrd-layout-section__search-result-desc.sc-mrd-layout-section{font-size:var(--mrd-font-size-xs);color:var(--mrd-color-neutral-500);margin-top:var(--mrd-space-1)}.mrd-layout-section__image-thumb-btn.sc-mrd-layout-section{background:none;border:none;padding:0;cursor:pointer;display:inline-block;border-radius:var(--mrd-border-radius);overflow:hidden;line-height:0}.mrd-layout-section__image-thumb-btn.sc-mrd-layout-section:hover .mrd-layout-section__image-thumb.sc-mrd-layout-section{opacity:0.85}.mrd-layout-section__image-thumb.sc-mrd-layout-section{display:block;max-width:160px;max-height:100px;border-radius:var(--mrd-border-radius);object-fit:cover;transition:opacity 0.15s}.mrd-layout-section__modal-backdrop.sc-mrd-layout-section{position:fixed;inset:0;background:rgba(0, 0, 0, 0.6);z-index:300;display:flex;align-items:center;justify-content:center}.mrd-layout-section__modal.sc-mrd-layout-section{position:relative;background:#fff;border-radius:var(--mrd-border-radius);padding:var(--mrd-space-3);max-width:min(90vw, 900px);max-height:90vh;display:flex;align-items:center;justify-content:center;box-shadow:var(--mrd-shadow-lg)}.mrd-layout-section__modal-close.sc-mrd-layout-section{position:absolute;top:var(--mrd-space-2);right:var(--mrd-space-2);background:rgba(0, 0, 0, 0.5);border:none;border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;font-size:var(--mrd-font-size-sm);line-height:1;z-index:1}.mrd-layout-section__modal-close.sc-mrd-layout-section:hover{background:rgba(0, 0, 0, 0.8)}.mrd-layout-section__modal-image.sc-mrd-layout-section{display:block;max-width:100%;max-height:calc(90vh - 2rem);border-radius:var(--mrd-border-radius);object-fit:contain}`;
+
+const MrdLayoutSection = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.mrdNavigate = createEvent(this, "mrdNavigate", 7);
+        this.mrdSearch = createEvent(this, "mrdSearch", 7);
+        this.mrdDownload = createEvent(this, "mrdDownload", 7);
+        this.mrdLoadViewPage = createEvent(this, "mrdLoadViewPage", 7);
+        this.mrdLoadImage = createEvent(this, "mrdLoadImage", 7);
+        this.mrdViewAction = createEvent(this, "mrdViewAction", 7);
+        this.mrdLoadViewAggregations = createEvent(this, "mrdLoadViewAggregations", 7);
         /** Items from one layout entry in ClientDashboardMetadata.layouts[]. */
         this.items = [];
         /** Record data object; keys are field names, _links holds relation and related-view links. */
@@ -336,414 +347,16 @@ export class MrdLayoutSection {
     render() {
         return (h(Host, { key: '8966198eebd98570d2db2f4d2fe9ef3f8b466ec6' }, h("div", { key: '645ddbfdd829a0f9c1a4eab18105662af6c078b2', class: "mrd-layout-section" }, this.items.map(item => this.renderItem(item))), this.renderImageModal()));
     }
-    static get is() { return "mrd-layout-section"; }
-    static get encapsulation() { return "scoped"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["mrd-layout-section.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["mrd-layout-section.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "items": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "ClientLayoutItem[]",
-                    "resolved": "ClientLayoutItem[]",
-                    "references": {
-                        "ClientLayoutItem": {
-                            "location": "import",
-                            "path": "../../types/client-layout",
-                            "id": "src/types/client-layout.ts::ClientLayoutItem",
-                            "referenceLocation": "ClientLayoutItem"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Items from one layout entry in ClientDashboardMetadata.layouts[]."
-                },
-                "getter": false,
-                "setter": false,
-                "defaultValue": "[]"
-            },
-            "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": "Record data object; keys are field names, _links holds relation and related-view links."
-                },
-                "getter": false,
-                "setter": false,
-                "defaultValue": "{}"
-            },
-            "views": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "Record<string, ClientViewMetadata>",
-                    "resolved": "ClientViewMetadata | string",
-                    "references": {
-                        "Record": {
-                            "location": "global",
-                            "id": "global::Record"
-                        },
-                        "ClientViewMetadata": {
-                            "location": "import",
-                            "path": "../../types/client-layout",
-                            "id": "src/types/client-layout.ts::ClientViewMetadata",
-                            "referenceLocation": "ClientViewMetadata"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Legacy: view metadata map (ClientDashboardMetadata.views). Not needed in new flat format."
-                },
-                "getter": false,
-                "setter": false,
-                "defaultValue": "{}"
-            },
-            "links": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "Record<string, { href: string }>",
-                    "resolved": "string | { href: string; }",
-                    "references": {
-                        "Record": {
-                            "location": "global",
-                            "id": "global::Record"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Legacy: top-level _links from ClientDashboardMetadata. Not needed in new flat format."
-                },
-                "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 states() {
-        return {
-            "searchQueryMap": {},
-            "searchResultsMap": {},
-            "imagePreviewUrl": {},
-            "imagePreviews": {},
-            "openHistoryField": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "mrdNavigate",
-                "name": "mrdNavigate",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "{ href?: string; label: string; navigate?: ClientLayoutItemNavigate }",
-                    "resolved": "{ href?: string | undefined; label: string; navigate?: ClientLayoutItemNavigate | undefined; }",
-                    "references": {
-                        "ClientLayoutItemNavigate": {
-                            "location": "import",
-                            "path": "../../types/client-layout",
-                            "id": "src/types/client-layout.ts::ClientLayoutItemNavigate",
-                            "referenceLocation": "ClientLayoutItemNavigate"
-                        }
-                    }
-                }
-            }, {
-                "method": "mrdSearch",
-                "name": "mrdSearch",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "{ query: string; dataClass: string }",
-                    "resolved": "{ query: string; dataClass: string; }",
-                    "references": {}
-                }
-            }, {
-                "method": "mrdDownload",
-                "name": "mrdDownload",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "{ href: string; fileName: string }",
-                    "resolved": "{ href: string; fileName: string; }",
-                    "references": {}
-                }
-            }, {
-                "method": "mrdLoadViewPage",
-                "name": "mrdLoadViewPage",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Re-emitted from an embedded mrd-table's mrdLoadPage; host fetches the next page and calls setViewPage()."
-                },
-                "complexType": {
-                    "original": "{ name: string; page: number; sort: string; path: string; qs: string }",
-                    "resolved": "{ name: string; page: number; sort: string; path: string; qs: string; }",
-                    "references": {}
-                }
-            }, {
-                "method": "mrdLoadImage",
-                "name": "mrdLoadImage",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Fired once on load for each IMAGE field that has an href; host resolves the URL and calls setImagePreview()."
-                },
-                "complexType": {
-                    "original": "{ fieldName: string; href: string }",
-                    "resolved": "{ fieldName: string; href: string; }",
-                    "references": {}
-                }
-            }, {
-                "method": "mrdViewAction",
-                "name": "mrdViewAction",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Re-emitted from an embedded mrd-table's mrdAction; host builds the target URL from dataClass."
-                },
-                "complexType": {
-                    "original": "{ name: string; action: string; dataClass: string; path?: string; qs?: string; parentPath?: string | null; basicType?: string }",
-                    "resolved": "{ name: string; action: string; dataClass: string; path?: string | undefined; qs?: string | undefined; parentPath?: string | null | undefined; basicType?: string | undefined; }",
-                    "references": {}
-                }
-            }, {
-                "method": "mrdLoadViewAggregations",
-                "name": "mrdLoadViewAggregations",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Re-emitted from an embedded mrd-table's mrdLoadAggregations; host calls setViewAggregations() with the result."
-                },
-                "complexType": {
-                    "original": "{ name: string; dataClass: string; path: string; qs: string; aggQs: string }",
-                    "resolved": "{ name: string; dataClass: string; path: string; qs: string; aggQs: string; }",
-                    "references": {}
-                }
-            }];
-    }
-    static get methods() {
-        return {
-            "setSearchResults": {
-                "complexType": {
-                    "signature": "(results: RelationSearchResult[], dataClass?: string) => Promise<void>",
-                    "parameters": [{
-                            "name": "results",
-                            "type": "RelationSearchResult[]",
-                            "docs": ""
-                        }, {
-                            "name": "dataClass",
-                            "type": "string | undefined",
-                            "docs": ""
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        },
-                        "RelationSearchResult": {
-                            "location": "import",
-                            "path": "../../types/client-layout",
-                            "id": "src/types/client-layout.ts::RelationSearchResult",
-                            "referenceLocation": "RelationSearchResult"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Inject search results. Pass dataClass to target a specific SEARCH item; omit when there is only one.",
-                    "tags": []
-                }
-            },
-            "setViewPage": {
-                "complexType": {
-                    "signature": "(name: string, page: number, rows: any[], totalElements?: number, hasNext?: boolean) => Promise<void>",
-                    "parameters": [{
-                            "name": "name",
-                            "type": "string",
-                            "docs": ""
-                        }, {
-                            "name": "page",
-                            "type": "number",
-                            "docs": ""
-                        }, {
-                            "name": "rows",
-                            "type": "any[]",
-                            "docs": ""
-                        }, {
-                            "name": "totalElements",
-                            "type": "number | undefined",
-                            "docs": ""
-                        }, {
-                            "name": "hasNext",
-                            "type": "boolean | undefined",
-                            "docs": ""
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Inject data into an embedded mrd-table for a RELATED_VIEW or VIEW item.\nPass totalElements to update the pagination total (safe to pass on every page).\nPass hasNext (from _links.next presence) so the table can decide whether to emit aggregations.",
-                    "tags": []
-                }
-            },
-            "setViewAggregations": {
-                "complexType": {
-                    "signature": "(name: string, data: any) => Promise<void>",
-                    "parameters": [{
-                            "name": "name",
-                            "type": "string",
-                            "docs": ""
-                        }, {
-                            "name": "data",
-                            "type": "any",
-                            "docs": ""
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Inject aggregation totals into an embedded mrd-table for a VIEW or RELATED_VIEW item.",
-                    "tags": []
-                }
-            },
-            "setImagePreview": {
-                "complexType": {
-                    "signature": "(fieldName: string, url: string) => Promise<void>",
-                    "parameters": [{
-                            "name": "fieldName",
-                            "type": "string",
-                            "docs": ""
-                        }, {
-                            "name": "url",
-                            "type": "string",
-                            "docs": ""
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Provide a resolved URL for an IMAGE field. Shows as thumbnail; clicking opens the lightbox.",
-                    "tags": []
-                }
-            },
-            "openImagePreview": {
-                "complexType": {
-                    "signature": "(url: string) => Promise<void>",
-                    "parameters": [{
-                            "name": "url",
-                            "type": "string",
-                            "docs": ""
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Open the lightbox directly with a URL (e.g. after mrdDownload on a FILE field).",
-                    "tags": []
-                }
-            }
-        };
-    }
-    static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "data",
-                "methodName": "dataChanged"
-            }];
-    }
-}
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "data": [{
+                "dataChanged": 0
+            }]
+    }; }
+};
+MrdLayoutSection.style = mrdLayoutSectionScss();
+
+export { MrdLayoutSection as mrd_layout_section };
+//# sourceMappingURL=mrd-layout-section.entry.esm.js.map
+
+//# sourceMappingURL=mrd-layout-section.entry.js.map