@mmlogic/components 0.1.0

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

@@ -0,0 +1,287 @@
+import { Host, h } from "@stencil/core";
+import { t } from "../../utils/i18n";
+export class MrdImageField {
+    constructor() {
+        this.name = '';
+        this.label = '';
+        this.required = false;
+        this.disabled = false;
+        this.locale = navigator.language;
+        this.accept = 'image/*';
+        this.maxSize = 0;
+        this.previewUrl = '';
+        this.fileName = '';
+        this.isDragging = 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) {
+                (_a = this.fileInputRef) === null || _a === void 0 ? void 0 : _a.click();
+            }
+        };
+        this.handleClear = (e) => {
+            e.stopPropagation();
+            this.previewUrl = '';
+            this.fileName = '';
+            this.error = '';
+            if (this.fileInputRef)
+                this.fileInputRef.value = '';
+            this.mrdChange.emit({ name: this.name, value: null });
+        };
+    }
+    handleFile(file) {
+        if (!file) {
+            this.previewUrl = '';
+            this.fileName = '';
+            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;
+        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 });
+    }
+    render() {
+        const hasError = !!this.error;
+        return (h(Host, { key: 'c188d49744b7044d46b6c6f42126032f1ecc8a8f' }, h("div", { key: '53990650a5109172addca5ae274b180569b08860', class: "mrd-image-field" }, this.label && (h("label", { key: '3dc78faca422fcafed31833a11307cace9f2ff13', class: `mrd-image-field__label${this.required ? ' mrd-image-field__label--required' : ''}` }, this.label)), h("div", { key: '4ca9eb1362c999721742ac3d727326078fe844c7', class: `mrd-image-field__zone${this.isDragging ? ' mrd-image-field__zone--dragging' : ''}${hasError ? ' mrd-image-field__zone--error' : ''}${this.disabled ? ' mrd-image-field__zone--disabled' : ''}`, onClick: this.handleZoneClick, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("input", { key: '9e3a237ffb69ce9f6fb20e6b3e603e4db453e7e9', ref: el => (this.fileInputRef = el), class: "mrd-image-field__input", type: "file", name: this.name, accept: this.accept, disabled: this.disabled, 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 })), h("div", { class: "mrd-image-field__preview-info" }, h("span", { class: "mrd-image-field__preview-name" }, this.fileName)), 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: '85cf998e1ab26cce7fbf87836df25672971a4eb1', 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": "''"
+            },
+            "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": {},
+            "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"
+                        }
+                    }
+                }
+            }];
+    }
+}

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

@@ -0,0 +1,166 @@
+: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__overlay {
+  display: none;
+}
+
+.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);
+}