@mmlogic/components 0.3.4 → 0.3.6

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

@@ -1,356 +0,0 @@
-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

@@ -1,190 +0,0 @@
-: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);
-}