@mmlogic/components 0.3.6 → 0.3.8

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

@@ -0,0 +1,356 @@
+import { Host, h } from "@stencil/core";
+import { t } from "../../utils/i18n";
+export class MrdImageField {
+    constructor() {
+        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 is() { return "mrd-image-field"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["mrd-image-field.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["mrd-image-field.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name",
+                "defaultValue": "''"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "value": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "unknown",
+                    "resolved": "unknown",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "null"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "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"
+            },
+            "accept": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "accept",
+                "defaultValue": "'image/*'"
+            },
+            "maxSize": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-size",
+                "defaultValue": "0"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "previewUrl": {},
+            "fileName": {},
+            "isDragging": {},
+            "uploading": {},
+            "error": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "mrdChange",
+                "name": "mrdChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ name: string; value: File | null }",
+                    "resolved": "{ name: string; value: File | null; }",
+                    "references": {
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
+                        }
+                    }
+                }
+            }, {
+                "method": "mrdBlur",
+                "name": "mrdBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ name: string; value: File | null }",
+                    "resolved": "{ name: string; value: File | null; }",
+                    "references": {
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
+                        }
+                    }
+                }
+            }, {
+                "method": "mrdUpload",
+                "name": "mrdUpload",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when an image is selected and needs to be uploaded.\nHost should upload the file and call form.setFieldValue(name, uri) with the result."
+                },
+                "complexType": {
+                    "original": "{ name: string; file: File }",
+                    "resolved": "{ name: string; file: File; }",
+                    "references": {
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "valueChanged"
+            }];
+    }
+}

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

@@ -0,0 +1,190 @@
+:host {
+  display: block;
+}
+
+.mrd-image-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mrd-space-1);
+  width: 100%;
+}
+
+.mrd-image-field__label {
+  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::after {
+  content: ' *';
+  color: var(--mrd-color-danger);
+}
+
+.mrd-image-field__zone {
+  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:hover {
+  border-color: var(--mrd-color-primary);
+  background-color: var(--mrd-color-primary-light);
+}
+
+.mrd-image-field__zone--dragging {
+  border-color: var(--mrd-color-primary);
+  background-color: var(--mrd-color-primary-light);
+}
+
+.mrd-image-field__zone--error {
+  border-color: var(--mrd-border-color-error);
+}
+
+.mrd-image-field__zone--disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.mrd-image-field__zone--disabled:hover {
+  border-color: var(--mrd-border-color);
+  background-color: var(--mrd-color-neutral-50);
+}
+
+.mrd-image-field__input {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.mrd-image-field__prompt {
+  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 {
+  width: 40px;
+  height: 40px;
+  color: var(--mrd-color-neutral-400);
+}
+
+.mrd-image-field__browse {
+  color: var(--mrd-color-primary);
+  font-weight: var(--mrd-font-weight-medium);
+  text-decoration: underline;
+}
+
+/* Preview: thumbnail + bestandsnaam + verwijder knop */
+.mrd-image-field__preview-container {
+  display: flex;
+  align-items: center;
+  gap: var(--mrd-space-4);
+  padding: var(--mrd-space-4);
+  width: 100%;
+}
+
+.mrd-image-field__preview-thumb {
+  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 {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.mrd-image-field__preview-info {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--mrd-space-1);
+}
+
+.mrd-image-field__preview-name {
+  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 {
+  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 {
+  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 {
+  font-family: var(--mrd-font-family);
+  font-size: var(--mrd-font-size-xs);
+  color: var(--mrd-color-neutral-500);
+}
+
+.mrd-image-field__clear {
+  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:hover {
+  background-color: var(--mrd-color-danger);
+  color: var(--mrd-color-white);
+}
+
+.mrd-image-field__error {
+  font-family: var(--mrd-font-family);
+  font-size: var(--mrd-error-font-size);
+  color: var(--mrd-error-color);
+}