@mmlogic/components 0.3.11 → 0.4.0

package/dist/collection/components/{mrd-file-field → fields/mrd-file-field}/mrd-file-field.js

@@ -1,5 +1,7 @@
 import { Host, h } from "@stencil/core";
-import { t } from "../../utils/i18n";
+import { t } from "../../../utils/i18n";
+import { FieldLabel, FieldError } from "../field-helpers";
+import { validateUploadFile, uploadZoneClass, makeDragHandlers } from "../file-upload-common";
 export class MrdFileField {
     constructor() {
         this.name = '';
@@ -19,20 +21,7 @@ export class MrdFileField {
             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.drag = makeDragHandlers(dragging => (this.isDragging = dragging), file => this.handleFile(file));
         this.handleZoneClick = () => {
             var _a;
             if (!this.disabled && !this.uploading) {
@@ -66,8 +55,9 @@ export class MrdFileField {
             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);
+        const uploadError = validateUploadFile(file, this.maxSize, this.locale);
+        if (uploadError) {
+            this.error = uploadError;
             return;
         }
         this.error = '';
@@ -79,13 +69,12 @@ export class MrdFileField {
     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: '095bb39f3cb1680cf5e7e51bdfd06d8eb087f237' }, h("div", { key: '7e5b5fe6e63b6530221083c8bcb82bcac59a5fe7', class: "mrd-file-field" }, this.label && (h("label", { key: 'c34723f4199371d6fe8ea87463d878b89c038590', class: `mrd-file-field__label${this.required ? ' mrd-file-field__label--required' : ''}` }, this.label)), h("div", { key: '4727667345d3cd4a5c65a431744a09f366943c13', class: zoneClass, onClick: this.handleZoneClick, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("input", { key: '45ed41c0f094dbe269561c8586e473f908cdf4a4', 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: '00ce94ead3c32ed63e903cfd9d8480084a308d84', class: "mrd-file-field__error" }, this.error))));
+        const zoneClass = uploadZoneClass('mrd-file-field', {
+            dragging: this.isDragging,
+            error: hasError,
+            disabled: this.disabled || this.uploading,
+        });
+        return (h(Host, { key: '2c4cee79cd0f95ed3750dfc86007a2b36aa3da15' }, h("div", { key: '5b47d0f83e8e38b22bb04409544ec2af580274f1', class: "mrd-file-field" }, h(FieldLabel, { key: '47a92d5680670bf750854fa6e7883da54a40baec', base: "mrd-file-field", label: this.label, required: this.required }), h("div", { key: '684f6ab39c32635fb5ca966ccab4a061d8682f89', class: zoneClass, onClick: this.handleZoneClick, onDragOver: this.drag.onDragOver, onDragLeave: this.drag.onDragLeave, onDrop: this.drag.onDrop }, h("input", { key: 'a47231d8c68280623daf0c5a2e4341417e7a88d0', 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)))))), h(FieldError, { key: '5f18e91aa94319a5571c368e745c108fb0d371a7', base: "mrd-file-field", error: this.error }))));
     }
     static get is() { return "mrd-file-field"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/{mrd-hyperlink-field/mrd-hyperlink-field.scss → fields/mrd-hyperlink-field/mrd-hyperlink-field.css}

@@ -8,7 +8,6 @@
   gap: var(--mrd-space-1);
   width: 100%;
 }
-
 .mrd-hyperlink-field__label {
   display: block;
   font-family: var(--mrd-font-family);
@@ -16,12 +15,10 @@
   font-weight: var(--mrd-label-font-weight);
   color: var(--mrd-label-color);
 }
-
 .mrd-hyperlink-field__label--required::after {
-  content: ' *';
+  content: " *";
   color: var(--mrd-color-danger);
 }
-
 .mrd-hyperlink-field__input {
   display: block;
   width: 100%;
@@ -38,29 +35,29 @@
   appearance: none;
   box-sizing: border-box;
 }
-
 .mrd-hyperlink-field__input::placeholder {
   color: var(--mrd-input-placeholder-color);
 }
-
 .mrd-hyperlink-field__input:focus {
   border-color: var(--mrd-border-color-focus);
   box-shadow: var(--mrd-shadow-focus);
 }
-
 .mrd-hyperlink-field__input:disabled {
   background-color: var(--mrd-input-bg-disabled);
   cursor: not-allowed;
   opacity: 0.7;
 }
-
 .mrd-hyperlink-field__input--error {
   border-color: var(--mrd-border-color-error);
 }
-
 .mrd-hyperlink-field__input--error:focus {
   box-shadow: var(--mrd-shadow-focus-error);
 }
+.mrd-hyperlink-field__error {
+  font-family: var(--mrd-font-family);
+  font-size: var(--mrd-error-font-size);
+  color: var(--mrd-error-color);
+}
 
 .mrd-hyperlink-field__input--name {
   margin-top: var(--mrd-space-1);
@@ -82,10 +79,4 @@
   font-family: var(--mrd-font-family);
   font-size: var(--mrd-font-size-base);
   color: var(--mrd-color-neutral-400);
-}
-
-.mrd-hyperlink-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-hyperlink-field → fields/mrd-hyperlink-field}/mrd-hyperlink-field.js

@@ -1,6 +1,7 @@
 import { Host, h } from "@stencil/core";
-import { t } from "../../utils/i18n";
-import { validateRequired, validateUrl } from "../../utils/validation";
+import { t } from "../../../utils/i18n";
+import { validateUrl } from "../../../utils/validation";
+import { FieldLabel, FieldError, controlClass, requiredError } from "../field-helpers";
 export class MrdHyperlinkField {
     constructor() {
         this.name = '';
@@ -22,15 +23,8 @@ export class MrdHyperlinkField {
             this.mrdChange.emit({ name: this.name, value: this.buildValue() });
         };
         this.handleBlur = () => {
-            if (this.required && !validateRequired(this.internalHref)) {
-                this.error = t('required', this.locale);
-            }
-            else if (this.internalHref && !validateUrl(this.internalHref)) {
-                this.error = t('invalid_url', this.locale);
-            }
-            else {
-                this.error = '';
-            }
+            this.error = requiredError(this.internalHref, this.required, this.locale)
+                || (this.internalHref && !validateUrl(this.internalHref) ? t('invalid_url', this.locale) : '');
             this.mrdBlur.emit({ name: this.name, value: this.buildValue() });
         };
     }
@@ -63,7 +57,7 @@ export class MrdHyperlinkField {
                 ? h("a", { class: "mrd-hyperlink-field__link", href: this.internalHref, target: "_blank", rel: "noopener noreferrer" }, this.internalName || this.internalHref)
                 : h("span", { class: "mrd-hyperlink-field__empty" }, "\u2014"))));
         }
-        return (h(Host, null, h("div", { class: "mrd-hyperlink-field" }, this.label && (h("label", { class: `mrd-hyperlink-field__label${this.required ? ' mrd-hyperlink-field__label--required' : ''}` }, this.label)), h("input", { class: `mrd-hyperlink-field__input${hasError ? ' mrd-hyperlink-field__input--error' : ''}`, type: "url", name: this.name, value: this.internalHref, placeholder: this.placeholder || 'https://', required: this.required, onInput: this.handleHrefInput, onBlur: this.handleBlur }), h("input", { class: "mrd-hyperlink-field__input mrd-hyperlink-field__input--name", type: "text", value: this.internalName, placeholder: t('hyperlink_name', this.locale), onInput: this.handleNameInput, onBlur: this.handleBlur }), hasError && h("span", { class: "mrd-hyperlink-field__error" }, this.error))));
+        return (h(Host, null, h("div", { class: "mrd-hyperlink-field" }, h(FieldLabel, { base: "mrd-hyperlink-field", label: this.label, required: this.required }), h("input", { class: controlClass('mrd-hyperlink-field', hasError), type: "url", name: this.name, value: this.internalHref, placeholder: this.placeholder || 'https://', required: this.required, onInput: this.handleHrefInput, onBlur: this.handleBlur }), h("input", { class: "mrd-hyperlink-field__input mrd-hyperlink-field__input--name", type: "text", value: this.internalName, placeholder: t('hyperlink_name', this.locale), onInput: this.handleNameInput, onBlur: this.handleBlur }), h(FieldError, { base: "mrd-hyperlink-field", error: this.error }))));
     }
     static get is() { return "mrd-hyperlink-field"; }
     static get encapsulation() { return "scoped"; }
@@ -128,7 +122,7 @@ export class MrdHyperlinkField {
                     "references": {
                         "HyperlinkValue": {
                             "location": "import",
-                            "path": "../../types/client-layout",
+                            "path": "../../../types/client-layout",
                             "id": "src/types/client-layout.ts::HyperlinkValue",
                             "referenceLocation": "HyperlinkValue"
                         }
@@ -252,7 +246,7 @@ export class MrdHyperlinkField {
                     "references": {
                         "HyperlinkValue": {
                             "location": "import",
-                            "path": "../../types/client-layout",
+                            "path": "../../../types/client-layout",
                             "id": "src/types/client-layout.ts::HyperlinkValue",
                             "referenceLocation": "HyperlinkValue"
                         }
@@ -274,7 +268,7 @@ export class MrdHyperlinkField {
                     "references": {
                         "HyperlinkValue": {
                             "location": "import",
-                            "path": "../../types/client-layout",
+                            "path": "../../../types/client-layout",
                             "id": "src/types/client-layout.ts::HyperlinkValue",
                             "referenceLocation": "HyperlinkValue"
                         }

package/dist/collection/components/{mrd-image-field/mrd-image-field.scss → fields/mrd-image-field/mrd-image-field.css}

@@ -8,7 +8,6 @@
   gap: var(--mrd-space-1);
   width: 100%;
 }
-
 .mrd-image-field__label {
   display: block;
   font-family: var(--mrd-font-family);
@@ -16,11 +15,15 @@
   font-weight: var(--mrd-label-font-weight);
   color: var(--mrd-label-color);
 }
-
 .mrd-image-field__label--required::after {
-  content: ' *';
+  content: " *";
   color: var(--mrd-color-danger);
 }
+.mrd-image-field__error {
+  font-family: var(--mrd-font-family);
+  font-size: var(--mrd-error-font-size);
+  color: var(--mrd-error-color);
+}
 
 .mrd-image-field__zone {
   display: flex;
@@ -34,26 +37,17 @@
   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 {
+.mrd-image-field__zone:hover, .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);
@@ -139,7 +133,7 @@
 .mrd-image-field__preview-overlay {
   position: absolute;
   inset: 0;
-  background: rgb(255 255 255 / 0.7);
+  background: rgba(255, 255, 255, 0.7);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -153,11 +147,14 @@
   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;
+  animation: mrd-spin 0.6s linear infinite;
 }
 
-@keyframes mrd-image-spin { to { transform: rotate(360deg); } }
-
+@keyframes mrd-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
 .mrd-image-field__upload-status {
   font-family: var(--mrd-font-family);
   font-size: var(--mrd-font-size-xs);
@@ -181,10 +178,4 @@
 .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);
-}
+}

package/dist/collection/components/{mrd-image-field → fields/mrd-image-field}/mrd-image-field.js

@@ -1,5 +1,7 @@
 import { Host, h } from "@stencil/core";
-import { t } from "../../utils/i18n";
+import { t } from "../../../utils/i18n";
+import { FieldLabel, FieldError } from "../field-helpers";
+import { validateUploadFile, uploadZoneClass, makeDragHandlers } from "../file-upload-common";
 export class MrdImageField {
     constructor() {
         this.name = '';
@@ -20,20 +22,7 @@ export class MrdImageField {
             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.drag = makeDragHandlers(dragging => (this.isDragging = dragging), file => this.handleFile(file));
         this.handleZoneClick = () => {
             var _a;
             if (!this.disabled && !this.uploading) {
@@ -70,12 +59,9 @@ export class MrdImageField {
             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';
+        const uploadError = validateUploadFile(file, this.maxSize, this.locale, true);
+        if (uploadError) {
+            this.error = uploadError;
             return;
         }
         this.error = '';
@@ -93,13 +79,12 @@ export class MrdImageField {
     }
     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: '97db2df72839f36b7a46e153a5dd1c208c52b522' }, h("div", { key: 'c8f2d3d858f90d322d26082aaf5adb57acfc78f4', class: "mrd-image-field" }, this.label && (h("label", { key: '6625e5031ff0b7c06f76c1ea0387f1bd5c1858a4', class: `mrd-image-field__label${this.required ? ' mrd-image-field__label--required' : ''}` }, this.label)), h("div", { key: '364216e6a96e845e21c42e821fdff02bd2612ff8', class: zoneClass, onClick: this.handleZoneClick, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("input", { key: '0487706ddd9f48cda1cb0c2a178809d90674486b', 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: 'bd505ef4f4b67c4e9138d8825c6e600f583f4cab', class: "mrd-image-field__error" }, this.error))));
+        const zoneClass = uploadZoneClass('mrd-image-field', {
+            dragging: this.isDragging,
+            error: hasError,
+            disabled: this.disabled || this.uploading,
+        });
+        return (h(Host, { key: 'ab78d93ab6c810363a8993bea4545f7406680e58' }, h("div", { key: '727ae5d9c1cce22d90d26229a9ea5d677abb4b07', class: "mrd-image-field" }, h(FieldLabel, { key: 'aab0e9fcc0204e8ea617453b5ca458f683194125', base: "mrd-image-field", label: this.label, required: this.required }), h("div", { key: '1241faff26c47a303fd0431201f490c6b8725987', class: zoneClass, onClick: this.handleZoneClick, onDragOver: this.drag.onDragOver, onDragLeave: this.drag.onDragLeave, onDrop: this.drag.onDrop }, h("input", { key: '70e3b8f869927ad525465ace96ed3ea24f5b7555', 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)))))), h(FieldError, { key: '01552a994c1e5a9f25129586a95562c32a377046', base: "mrd-image-field", error: this.error }))));
     }
     static get is() { return "mrd-image-field"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/{mrd-list-field/mrd-list-field.scss → fields/mrd-list-field/mrd-list-field.css}

@@ -8,7 +8,6 @@
   gap: var(--mrd-space-1);
   width: 100%;
 }
-
 .mrd-list-field__label {
   display: block;
   font-family: var(--mrd-font-family);
@@ -16,52 +15,56 @@
   font-weight: var(--mrd-label-font-weight);
   color: var(--mrd-label-color);
 }
-
 .mrd-list-field__label--required::after {
-  content: ' *';
+  content: " *";
   color: var(--mrd-color-danger);
 }
-
 .mrd-list-field__select {
   display: block;
   width: 100%;
   height: var(--mrd-input-height);
   padding: var(--mrd-input-padding-y) var(--mrd-input-padding-x);
-  padding-right: calc(var(--mrd-input-padding-x) + 1.5rem);
   font-family: var(--mrd-font-family);
   font-size: var(--mrd-font-size-base);
   color: var(--mrd-input-color);
   background-color: var(--mrd-input-bg);
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: right var(--mrd-space-3) center;
   border: var(--mrd-border-width) solid var(--mrd-border-color);
   border-radius: var(--mrd-border-radius);
   transition: border-color var(--mrd-transition), box-shadow var(--mrd-transition);
   outline: none;
   appearance: none;
-  cursor: pointer;
   box-sizing: border-box;
 }
-
+.mrd-list-field__select::placeholder {
+  color: var(--mrd-input-placeholder-color);
+}
 .mrd-list-field__select:focus {
   border-color: var(--mrd-border-color-focus);
   box-shadow: var(--mrd-shadow-focus);
 }
-
 .mrd-list-field__select:disabled {
   background-color: var(--mrd-input-bg-disabled);
   cursor: not-allowed;
   opacity: 0.7;
 }
-
 .mrd-list-field__select--error {
   border-color: var(--mrd-border-color-error);
 }
-
 .mrd-list-field__select--error:focus {
   box-shadow: var(--mrd-shadow-focus-error);
 }
+.mrd-list-field__select {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right var(--mrd-space-3) center;
+  padding-right: calc(var(--mrd-input-padding-x) + 1.5rem);
+  cursor: pointer;
+}
+.mrd-list-field__error {
+  font-family: var(--mrd-font-family);
+  font-size: var(--mrd-error-font-size);
+  color: var(--mrd-error-color);
+}
 
 .mrd-list-field__checkbox-list {
   display: flex;
@@ -87,7 +90,7 @@
   cursor: pointer;
 }
 
-.mrd-list-field__checkbox-item input[type='checkbox'] {
+.mrd-list-field__checkbox-item input[type=checkbox] {
   width: 1rem;
   height: 1rem;
   cursor: pointer;
@@ -100,10 +103,4 @@
   height: 12px;
   border-radius: 50%;
   flex-shrink: 0;
-}
-
-.mrd-list-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-list-field → fields/mrd-list-field}/mrd-list-field.js

@@ -1,6 +1,6 @@
 import { Host, h } from "@stencil/core";
-import { t } from "../../utils/i18n";
-import { validateRequired } from "../../utils/validation";
+import { t } from "../../../utils/i18n";
+import { FieldLabel, FieldError, controlClass, requiredError } from "../field-helpers";
 export class MrdListField {
     constructor() {
         this.name = '';
@@ -19,22 +19,12 @@ export class MrdListField {
             if (this.multiple) {
                 const vals = Array.from(select.selectedOptions).map(o => o.value);
                 this.selected = vals;
-                if (this.required && !validateRequired(vals)) {
-                    this.error = t('required', this.locale);
-                }
-                else {
-                    this.error = '';
-                }
+                this.error = requiredError(vals, this.required, this.locale);
                 this.mrdChange.emit({ name: this.name, value: vals });
             }
             else {
                 const val = select.value;
-                if (this.required && !validateRequired(val)) {
-                    this.error = t('required', this.locale);
-                }
-                else {
-                    this.error = '';
-                }
+                this.error = requiredError(val, this.required, this.locale);
                 this.mrdChange.emit({ name: this.name, value: val });
             }
         };
@@ -49,12 +39,7 @@ export class MrdListField {
             else {
                 this.selected = [...this.selected, key];
             }
-            if (this.required && !validateRequired(this.selected)) {
-                this.error = t('required', this.locale);
-            }
-            else {
-                this.error = '';
-            }
+            this.error = requiredError(this.selected, this.required, this.locale);
             this.mrdChange.emit({ name: this.name, value: this.selected });
         };
     }
@@ -78,17 +63,17 @@ export class MrdListField {
         const hasError = !!this.error;
         const currentValue = Array.isArray(this.value) ? ((_a = this.value[0]) !== null && _a !== void 0 ? _a : '') : ((_b = this.value) !== null && _b !== void 0 ? _b : '');
         if (this.multiple) {
-            return (h(Host, null, h("div", { class: "mrd-list-field" }, this.label && (h("label", { class: `mrd-list-field__label${this.required ? ' mrd-list-field__label--required' : ''}` }, this.label)), h("div", { class: `mrd-list-field__checkbox-list${hasError ? ' mrd-list-field__checkbox-list--error' : ''}` }, this.listItems.map(lv => {
+            return (h(Host, null, h("div", { class: "mrd-list-field" }, h(FieldLabel, { base: "mrd-list-field", label: this.label, required: this.required }), h("div", { class: controlClass('mrd-list-field', hasError, 'checkbox-list') }, this.listItems.map(lv => {
                 var _a, _b;
                 return (h("label", { key: lv.key, class: "mrd-list-field__checkbox-item" }, h("input", { type: "checkbox", checked: this.selected.includes(lv.key), disabled: this.disabled, onChange: () => this.toggleCheckbox(lv.key) }), (lv.color || lv.backgroundColor) && (h("span", { class: "mrd-list-field__color-dot", style: { backgroundColor: (_b = (_a = lv.backgroundColor) !== null && _a !== void 0 ? _a : lv.color) !== null && _b !== void 0 ? _b : '' } })), h("span", null, lv.label)));
-            })), hasError && h("span", { class: "mrd-list-field__error" }, this.error))));
+            })), h(FieldError, { base: "mrd-list-field", error: this.error }))));
         }
-        return (h(Host, null, h("div", { class: "mrd-list-field" }, this.label && (h("label", { class: `mrd-list-field__label${this.required ? ' mrd-list-field__label--required' : ''}` }, this.label)), h("select", { class: `mrd-list-field__select${hasError ? ' mrd-list-field__select--error' : ''}`, name: this.name, required: this.required, disabled: this.disabled, onChange: this.handleSelectChange, onBlur: this.handleBlur }, h("option", { value: "" }, t('select_placeholder', this.locale)), this.listItems.map(lv => {
+        return (h(Host, null, h("div", { class: "mrd-list-field" }, h(FieldLabel, { base: "mrd-list-field", label: this.label, required: this.required }), h("select", { class: controlClass('mrd-list-field', hasError, 'select'), name: this.name, required: this.required, disabled: this.disabled, onChange: this.handleSelectChange, onBlur: this.handleBlur }, h("option", { value: "" }, t('select_placeholder', this.locale)), this.listItems.map(lv => {
             var _a, _b;
             const bg = (_b = (_a = lv.backgroundColor) !== null && _a !== void 0 ? _a : lv.color) !== null && _b !== void 0 ? _b : null;
             const style = bg ? { backgroundColor: bg, color: this.getContrastColor(bg) } : {};
             return (h("option", { key: lv.key, value: lv.key, selected: lv.key === currentValue, style: style }, lv.label));
-        })), hasError && h("span", { class: "mrd-list-field__error" }, this.error))));
+        })), h(FieldError, { base: "mrd-list-field", error: this.error }))));
     }
     static get is() { return "mrd-list-field"; }
     static get encapsulation() { return "scoped"; }
@@ -253,7 +238,7 @@ export class MrdListField {
                     "references": {
                         "ClientListValue": {
                             "location": "import",
-                            "path": "../../types",
+                            "path": "../../../types",
                             "id": "src/types/index.ts::ClientListValue",
                             "referenceLocation": "ClientListValue"
                         }

package/dist/collection/components/{mrd-longtext-field/mrd-longtext-field.scss → fields/mrd-longtext-field/mrd-longtext-field.css}

@@ -8,7 +8,6 @@
   gap: var(--mrd-space-1);
   width: 100%;
 }
-
 .mrd-longtext-field__label {
   display: block;
   font-family: var(--mrd-font-family);
@@ -16,16 +15,14 @@
   font-weight: var(--mrd-label-font-weight);
   color: var(--mrd-label-color);
 }
-
 .mrd-longtext-field__label--required::after {
-  content: ' *';
+  content: " *";
   color: var(--mrd-color-danger);
 }
-
 .mrd-longtext-field__input {
   display: block;
   width: 100%;
-  min-height: calc(var(--mrd-input-height) * 5);
+  height: var(--mrd-input-height);
   padding: var(--mrd-input-padding-y) var(--mrd-input-padding-x);
   font-family: var(--mrd-font-family);
   font-size: var(--mrd-font-size-base);
@@ -35,27 +32,39 @@
   border-radius: var(--mrd-border-radius);
   transition: border-color var(--mrd-transition), box-shadow var(--mrd-transition);
   outline: none;
-  resize: vertical;
+  appearance: none;
   box-sizing: border-box;
-  line-height: 1.5;
 }
-
 .mrd-longtext-field__input::placeholder {
   color: var(--mrd-input-placeholder-color);
 }
-
 .mrd-longtext-field__input:focus {
   border-color: var(--mrd-border-color-focus);
   box-shadow: var(--mrd-shadow-focus);
 }
-
+.mrd-longtext-field__input:disabled {
+  background-color: var(--mrd-input-bg-disabled);
+  cursor: not-allowed;
+  opacity: 0.7;
+}
 .mrd-longtext-field__input--error {
   border-color: var(--mrd-border-color-error);
 }
-
 .mrd-longtext-field__input--error:focus {
   box-shadow: var(--mrd-shadow-focus-error);
 }
+.mrd-longtext-field__error {
+  font-family: var(--mrd-font-family);
+  font-size: var(--mrd-error-font-size);
+  color: var(--mrd-error-color);
+}
+
+.mrd-longtext-field__input {
+  height: auto;
+  min-height: calc(var(--mrd-input-height) * 5);
+  resize: vertical;
+  line-height: 1.5;
+}
 
 .mrd-longtext-field__content {
   font-family: var(--mrd-font-family);
@@ -69,10 +78,4 @@
   border: var(--mrd-border-width) solid var(--mrd-border-color);
   border-radius: var(--mrd-border-radius);
   line-height: 1.5;
-}
-
-.mrd-longtext-field__error {
-  font-family: var(--mrd-font-family);
-  font-size: var(--mrd-error-font-size);
-  color: var(--mrd-error-color);
-}
+}