@mmlogic/components 0.3.4 → 0.3.6

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

@@ -1,341 +0,0 @@
-import { Host, h } from "@stencil/core";
-import { t } from "../../utils/i18n";
-export class MrdFileField {
-    constructor() {
-        this.name = '';
-        this.label = '';
-        this.value = null;
-        this.required = false;
-        this.disabled = false;
-        this.locale = navigator.language;
-        this.accept = '';
-        this.maxSize = 0; // bytes, 0 = no limit
-        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.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.fileName = '';
-        }
-    }
-    handleFile(file) {
-        if (!file) {
-            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;
-        }
-        this.error = '';
-        this.fileName = file.name;
-        this.uploading = true;
-        this.mrdChange.emit({ name: this.name, value: file });
-        this.mrdUpload.emit({ name: this.name, file });
-    }
-    render() {
-        const hasFile = this.uploading || (typeof this.value === 'string' && this.value) || this.fileName;
-        const hasError = !!this.error;
-        const zoneClass = [
-            'mrd-file-field__zone',
-            this.isDragging ? 'mrd-file-field__zone--dragging' : '',
-            hasError ? 'mrd-file-field__zone--error' : '',
-            this.disabled || this.uploading ? 'mrd-file-field__zone--disabled' : '',
-        ].filter(Boolean).join(' ');
-        return (h(Host, { key: '2090102df8169226c1e66f87cbc837296e4b55d4' }, h("div", { key: '7a37a09df1bfa2eaf28ed04c806ad5f7c0337bb0', class: "mrd-file-field" }, this.label && (h("label", { key: '8f1fcb8adbb66b792be902c7c548e50db99b6a53', class: `mrd-file-field__label${this.required ? ' mrd-file-field__label--required' : ''}` }, this.label)), h("div", { key: '66d992298f537b24d69ce3ead3dd229f6d124f3d', class: zoneClass, onClick: this.handleZoneClick, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("input", { key: '95ba6560e71ee08c6b2526802727b29a18cdc454', ref: el => (this.fileInputRef = el), class: "mrd-file-field__input", type: "file", name: this.name, accept: this.accept, disabled: this.disabled || this.uploading, required: this.required && !hasFile, onChange: this.handleInputChange }), hasFile ? (h("div", { class: "mrd-file-field__selected" }, this.uploading ? (h("span", { class: "mrd-file-field__spinner", "aria-label": t('loading', this.locale) })) : (h("svg", { class: "mrd-file-field__icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }), h("polyline", { points: "14 2 14 8 20 8" }))), h("span", { class: "mrd-file-field__filename" }, this.fileName), !this.uploading && (h("button", { class: "mrd-file-field__clear", type: "button", onClick: this.handleClear, "aria-label": t('clear', this.locale) }, "\u2715")))) : (h("div", { class: "mrd-file-field__prompt" }, h("svg", { class: "mrd-file-field__upload-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("polyline", { points: "16 16 12 12 8 16" }), h("line", { x1: "12", y1: "12", x2: "12", y2: "21" }), h("path", { d: "M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3" })), h("span", null, t('drop_file_here', this.locale), ' ', h("span", { class: "mrd-file-field__browse" }, t('browse', this.locale)))))), hasError && h("span", { key: 'a6020e63bebb01e31a980a903f81badd486585aa', class: "mrd-file-field__error" }, this.error))));
-    }
-    static get is() { return "mrd-file-field"; }
-    static get encapsulation() { return "scoped"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["mrd-file-field.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["mrd-file-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": "''"
-            },
-            "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 {
-            "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 a file 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-file-field/mrd-file-field.scss

@@ -1,153 +0,0 @@
-:host {
-  display: block;
-}
-
-.mrd-file-field {
-  display: flex;
-  flex-direction: column;
-  gap: var(--mrd-space-1);
-  width: 100%;
-}
-
-.mrd-file-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-file-field__label--required::after {
-  content: ' *';
-  color: var(--mrd-color-danger);
-}
-
-.mrd-file-field__zone {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--mrd-space-6);
-  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-file-field__zone:hover {
-  border-color: var(--mrd-color-primary);
-  background-color: var(--mrd-color-primary-light);
-}
-
-.mrd-file-field__zone--dragging {
-  border-color: var(--mrd-color-primary);
-  background-color: var(--mrd-color-primary-light);
-}
-
-.mrd-file-field__zone--error {
-  border-color: var(--mrd-border-color-error);
-}
-
-.mrd-file-field__zone--disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.mrd-file-field__zone--disabled:hover {
-  border-color: var(--mrd-border-color);
-  background-color: var(--mrd-color-neutral-50);
-}
-
-.mrd-file-field__input {
-  position: absolute;
-  inset: 0;
-  opacity: 0;
-  width: 100%;
-  height: 100%;
-  cursor: pointer;
-  pointer-events: none;
-}
-
-.mrd-file-field__prompt {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--mrd-space-2);
-  font-family: var(--mrd-font-family);
-  font-size: var(--mrd-font-size-sm);
-  color: var(--mrd-color-neutral-500);
-  text-align: center;
-}
-
-.mrd-file-field__upload-icon {
-  width: 32px;
-  height: 32px;
-  color: var(--mrd-color-neutral-400);
-}
-
-.mrd-file-field__browse {
-  color: var(--mrd-color-primary);
-  font-weight: var(--mrd-font-weight-medium);
-  text-decoration: underline;
-}
-
-.mrd-file-field__selected {
-  display: flex;
-  align-items: center;
-  gap: var(--mrd-space-2);
-  font-family: var(--mrd-font-family);
-  font-size: var(--mrd-font-size-sm);
-  color: var(--mrd-color-neutral-700);
-}
-
-.mrd-file-field__icon {
-  width: 20px;
-  height: 20px;
-  color: var(--mrd-color-primary);
-  flex-shrink: 0;
-}
-
-.mrd-file-field__filename {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: 200px;
-}
-
-.mrd-file-field__clear {
-  background: none;
-  border: none;
-  cursor: pointer;
-  color: var(--mrd-color-neutral-400);
-  font-size: var(--mrd-font-size-sm);
-  padding: var(--mrd-space-1);
-  border-radius: var(--mrd-border-radius-sm);
-  line-height: 1;
-}
-
-.mrd-file-field__clear:hover {
-  color: var(--mrd-color-danger);
-  background-color: var(--mrd-color-danger-light);
-}
-
-.mrd-file-field__spinner {
-  display: inline-block;
-  flex-shrink: 0;
-  width: 18px;
-  height: 18px;
-  border: 2px solid var(--mrd-color-neutral-300);
-  border-top-color: var(--mrd-color-primary);
-  border-radius: 50%;
-  animation: mrd-file-spin 0.6s linear infinite;
-}
-
-@keyframes mrd-file-spin { to { transform: rotate(360deg); } }
-
-.mrd-file-field__error {
-  font-family: var(--mrd-font-family);
-  font-size: var(--mrd-error-font-size);
-  color: var(--mrd-error-color);
-}

package/dist/collection/components/mrd-form/mrd-form.scss

@@ -1,148 +0,0 @@
-:host {
-  display: block;
-}
-
-.mrd-form {
-  font-family: var(--mrd-font-family);
-  width: 100%;
-}
-
-.mrd-form__title {
-  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-6) 0;
-}
-
-.mrd-form__body {
-  display: flex;
-  flex-direction: column;
-  gap: var(--mrd-space-5);
-}
-
-.mrd-form__field {
-  display: flex;
-  flex-direction: column;
-  gap: var(--mrd-space-1);
-}
-
-.mrd-form__field-error {
-  font-family: var(--mrd-font-family);
-  font-size: var(--mrd-error-font-size);
-  color: var(--mrd-error-color);
-}
-
-.mrd-form__section {
-  border: var(--mrd-border-width) solid var(--mrd-border-color);
-  border-radius: var(--mrd-border-radius-md);
-  padding: var(--mrd-space-4) var(--mrd-space-5);
-  margin: 0;
-}
-
-.mrd-form__section-legend {
-  font-family: var(--mrd-font-family);
-  font-size: var(--mrd-font-size-base);
-  font-weight: var(--mrd-font-weight-semibold);
-  color: var(--mrd-color-neutral-700);
-  padding: 0 var(--mrd-space-2);
-}
-
-.mrd-form__section-body {
-  display: flex;
-  flex-direction: column;
-  gap: var(--mrd-space-4);
-  margin-top: var(--mrd-space-2);
-}
-
-.mrd-form__group {
-  display: flex;
-  flex-direction: column;
-  gap: var(--mrd-space-2);
-}
-
-.mrd-form__group-label {
-  font-family: var(--mrd-font-family);
-  font-size: var(--mrd-font-size-sm);
-  font-weight: var(--mrd-font-weight-semibold);
-  color: var(--mrd-color-neutral-500);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-.mrd-form__group-body {
-  display: flex;
-  flex-direction: column;
-  gap: var(--mrd-space-4);
-  padding-left: var(--mrd-space-4);
-  border-left: 3px solid var(--mrd-color-neutral-200);
-}
-
-.mrd-form__footer {
-  margin-top: var(--mrd-space-8);
-  padding-top: var(--mrd-space-5);
-  border-top: var(--mrd-border-width) solid var(--mrd-border-color);
-  display: flex;
-  justify-content: flex-end;
-  gap: var(--mrd-space-3);
-}
-
-.mrd-form__submit {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  height: var(--mrd-input-height);
-  padding: 0 var(--mrd-space-6);
-  background-color: var(--mrd-color-primary);
-  color: var(--mrd-color-white);
-  font-family: var(--mrd-font-family);
-  font-size: var(--mrd-font-size-base);
-  font-weight: var(--mrd-font-weight-medium);
-  border: none;
-  border-radius: var(--mrd-border-radius);
-  cursor: pointer;
-  transition: background-color var(--mrd-transition);
-}
-
-.mrd-form__submit:hover {
-  background-color: var(--mrd-color-primary-hover);
-}
-
-.mrd-form__submit:focus {
-  outline: none;
-  box-shadow: var(--mrd-shadow-focus);
-}
-
-.mrd-form__submit:active {
-  background-color: var(--mrd-color-primary-dark);
-}
-
-.mrd-form__cancel {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  height: var(--mrd-input-height);
-  padding: 0 var(--mrd-space-6);
-  background-color: transparent;
-  color: var(--mrd-color-neutral-600);
-  font-family: var(--mrd-font-family);
-  font-size: var(--mrd-font-size-base);
-  font-weight: var(--mrd-font-weight-medium);
-  border: var(--mrd-border-width) solid var(--mrd-border-color);
-  border-radius: var(--mrd-border-radius);
-  cursor: pointer;
-  transition: background-color var(--mrd-transition), color var(--mrd-transition);
-}
-
-.mrd-form__cancel:hover {
-  background-color: var(--mrd-color-neutral-100);
-  color: var(--mrd-color-neutral-800);
-}
-
-.mrd-form__cancel:focus {
-  outline: none;
-  box-shadow: var(--mrd-shadow-focus);
-}
-
-.mrd-form__cancel:active {
-  background-color: var(--mrd-color-neutral-200);
-}