@mmlogic/components 0.3.10 → 0.4.0

package/dist/collection/components/documents/mrd-document-list/tree-view.js

@@ -0,0 +1,75 @@
+import { h } from "@stencil/core";
+import { t } from "../../../utils/i18n";
+import { formatDate } from "../../../utils/format";
+function chevron(open, leaf) {
+    return (h("span", { class: `mrd-document-list__chev${leaf ? ' mrd-document-list__chev--leaf' : ''}${open ? ' mrd-document-list__chev--open' : ''}` }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M9 6l6 6-6 6" }))));
+}
+function dossierIcon() {
+    return (h("svg", { class: "mrd-document-list__icon mrd-document-list__icon--dossier", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" })));
+}
+function folderIcon() {
+    return (h("svg", { class: "mrd-document-list__icon mrd-document-list__icon--folder", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" })));
+}
+function docIcon() {
+    return (h("svg", { class: "mrd-document-list__icon mrd-document-list__icon--doc", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }), h("path", { d: "M14 2v6h6" })));
+}
+function indent(depth) {
+    return h("span", { class: "mrd-document-list__indent", style: { width: `${depth * 18}px` } });
+}
+export function renderLoadingRow(ctx, depth) {
+    return (h("div", { class: "mrd-document-list__loading", key: "loading" }, indent(depth), h("span", { class: "mrd-document-list__spinner" }), t('loading', ctx.locale)));
+}
+function renderUploadingRow(ctx, depth) {
+    return (h("div", { class: "mrd-document-list__loading", key: "uploading" }, indent(depth), h("span", { class: "mrd-document-list__spinner" }), t('upload_file', ctx.locale)));
+}
+function renderDocRow(ctx, doc, node, container, depth) {
+    var _a, _b, _c, _d, _e;
+    const label = (_b = (_a = doc === null || doc === void 0 ? void 0 : doc[ctx.titleField]) !== null && _a !== void 0 ? _a : doc === null || doc === void 0 ? void 0 : doc.name) !== null && _b !== void 0 ? _b : '';
+    const dateRaw = ctx.dateField ? doc === null || doc === void 0 ? void 0 : doc[ctx.dateField] : undefined;
+    const date = dateRaw ? formatDate(dateRaw, ctx.locale) : '';
+    return (h("div", { class: "mrd-document-list__row mrd-document-list__row--doc", key: (_e = (_d = (_c = doc === null || doc === void 0 ? void 0 : doc._links) === null || _c === void 0 ? void 0 : _c.self) === null || _d === void 0 ? void 0 : _d.href) !== null && _e !== void 0 ? _e : label, draggable: true, onClick: () => ctx.on.openDoc(doc), onDragStart: (e) => ctx.on.docDragStart(e, doc, node), onDragEnd: ctx.on.docDragEnd, onDragOver: (e) => ctx.on.nodeDragOver(e, node), onDragLeave: () => ctx.on.nodeDragLeave(node), onDrop: (e) => ctx.on.nodeDrop(e, node, container) }, indent(depth), chevron(false, true), docIcon(), h("span", { class: "mrd-document-list__label" }, label), date && h("span", { class: "mrd-document-list__date" }, date)));
+}
+function renderFolderEditRow(ctx, node, depth) {
+    return (h("div", { class: "mrd-document-list__node", key: node.id }, h("div", { class: "mrd-document-list__row mrd-document-list__row--edit" }, indent(depth), chevron(false, true), folderIcon(), h("input", { class: "mrd-document-list__name-input", type: "text", placeholder: t('folder_name_placeholder', ctx.locale), ref: el => ctx.on.setPendingInputEl(el), onInput: ctx.on.pendingInput, onKeyDown: ctx.on.pendingKeyDown, onBlur: () => ctx.on.cancelFolder() })), node.error && (h("div", { class: "mrd-document-list__error", style: { paddingLeft: `${depth * 18 + 52}px` } }, node.error))));
+}
+export function renderNodeChildren(ctx, container, node, depth) {
+    const out = [];
+    // Direct documents of this node (root docs live on the container node).
+    if (node.hasDocs) {
+        if (node.docsLoaded) {
+            for (const doc of node.docs)
+                out.push(renderDocRow(ctx, doc, node, container, depth));
+        }
+        else if (node.loading) {
+            out.push(renderLoadingRow(ctx, depth));
+        }
+    }
+    // Child folders.
+    for (const child of node.children) {
+        out.push(renderFolderNode(ctx, container, child, depth));
+    }
+    // An uploading file dropped onto this node.
+    if (node.id === ctx.uploadingNodeId)
+        out.push(renderUploadingRow(ctx, depth));
+    return out;
+}
+export function renderFolderNode(ctx, container, node, depth) {
+    if (node.editing)
+        return renderFolderEditRow(ctx, node, depth);
+    const leaf = node.children.length === 0 && !node.hasDocs;
+    const selected = node.id === ctx.selectedId;
+    const cls = 'mrd-document-list__row'
+        + (selected ? ' mrd-document-list__row--selected' : '')
+        + (node.pending ? ' mrd-document-list__row--pending' : '')
+        + (node.id === ctx.dropTargetId ? ' mrd-document-list__row--drop' : '');
+    return (h("div", { class: "mrd-document-list__node", key: node.id }, h("div", { class: cls, onClick: () => ctx.on.toggleFolder(container, node), onDragOver: (e) => ctx.on.nodeDragOver(e, node), onDragLeave: () => ctx.on.nodeDragLeave(node), onDrop: (e) => ctx.on.nodeDrop(e, node, container) }, indent(depth), chevron(node.open, leaf), folderIcon(), h("span", { class: "mrd-document-list__label" }, node.label), h("span", { class: "mrd-document-list__count" }, node.totalCount)), node.open && h("div", { class: "mrd-document-list__kids" }, renderNodeChildren(ctx, container, node, depth + 1))));
+}
+export function renderContainerNode(ctx, node, depth) {
+    const selected = node.id === ctx.selectedId;
+    const cls = 'mrd-document-list__row mrd-document-list__row--dossier'
+        + (selected ? ' mrd-document-list__row--selected' : '')
+        + (node.id === ctx.dropTargetId ? ' mrd-document-list__row--drop' : '');
+    return (h("div", { class: "mrd-document-list__node", key: node.id }, h("div", { class: cls, onClick: () => ctx.on.toggleContainer(node), onDragOver: (e) => ctx.on.nodeDragOver(e, node), onDragLeave: () => ctx.on.nodeDragLeave(node), onDrop: (e) => ctx.on.nodeDrop(e, node, node) }, indent(depth), chevron(node.open, false), dossierIcon(), h("span", { class: "mrd-document-list__label" }, node.label), h("span", { class: "mrd-document-list__count" }, node.totalCount)), node.open && (h("div", { class: "mrd-document-list__kids" }, node.loading && !node.foldersLoaded
+        ? renderLoadingRow(ctx, depth + 1)
+        : renderNodeChildren(ctx, node, node, depth + 1)))));
+}

package/dist/collection/components/{mrd-document-view/mrd-document-view.scss → documents/mrd-document-view/mrd-document-view.css}

@@ -118,4 +118,4 @@
   font-size: var(--mrd-font-size-base);
   color: var(--mrd-color-neutral-700);
   line-height: var(--mrd-line-height-relaxed);
-}
+}

package/dist/collection/components/{mrd-document-view → documents/mrd-document-view}/mrd-document-view.js

@@ -1,6 +1,6 @@
 import { Host, h } from "@stencil/core";
-import { t } from "../../utils/i18n";
-import { formatDate } from "../../utils/format";
+import { t } from "../../../utils/i18n";
+import { formatDate } from "../../../utils/format";
 /**
  * Archetype-driven single-document view. Given a `commons.document` binding and a
  * data record, renders the document recognisably — title, file preview/download,
@@ -56,7 +56,7 @@ export class MrdDocumentView {
         const date = dateRaw != null && dateRaw !== '' ? formatDate(dateRaw, this.locale) : null;
         const summaryRaw = this.slotValue('summary');
         const summary = summaryRaw != null && summaryRaw !== '' ? String(summaryRaw) : null;
-        return (h(Host, { key: '0a2071925ecdb21738376d66fa4babf4590e694c' }, h("div", { key: 'a2d29c0b6e211cab142adc780466bc885a602e96', class: "mrd-document-view" }, this.renderContainer(), title && h("h1", { key: '7f5ac202c21bc8a70f0dd15e2e1fa06e651b5bce', class: "mrd-document-view__title" }, title), date && h("p", { key: 'b1dce94d5fd8bfd5e078644f631a38f91b87e7ff', class: "mrd-document-view__date" }, date), this.renderFile(), summary && (h("div", { key: '588b9ca40a49ae9ea303852620bde75333b440ab', class: "mrd-document-view__summary" }, h("div", { key: 'd3b8adb85ac346b72451e789c10aedd539c966de', class: "mrd-document-view__summary-body", innerHTML: summary }))))));
+        return (h(Host, { key: '0c64c72eaf5e1eefc2ca9aebb2543081eb1eae32' }, h("div", { key: '70cce81b089fee81a4c163a6ba5fbcc8cb46131c', class: "mrd-document-view" }, this.renderContainer(), title && h("h1", { key: '50f85b32a6740d6cf57fdf1bb0bcc597b5e97b31', class: "mrd-document-view__title" }, title), date && h("p", { key: 'b3c8fb3b4382104858d49ef9a1597034665122bb', class: "mrd-document-view__date" }, date), this.renderFile(), summary && (h("div", { key: '2046c1eca7601549115de0c95ff778abaf5faf46', class: "mrd-document-view__summary" }, h("div", { key: '875863d3e438eee3d4df10473a93f09370fde08c', class: "mrd-document-view__summary-body", innerHTML: summary }))))));
     }
     static get is() { return "mrd-document-view"; }
     static get encapsulation() { return "scoped"; }
@@ -81,7 +81,7 @@ export class MrdDocumentView {
                     "references": {
                         "ClientArchetype": {
                             "location": "import",
-                            "path": "../../types/client-layout",
+                            "path": "../../../types/client-layout",
                             "id": "src/types/client-layout.ts::ClientArchetype",
                             "referenceLocation": "ClientArchetype"
                         }

package/dist/collection/components/fields/field-helpers.js

@@ -0,0 +1,17 @@
+import { h } from "@stencil/core";
+import { t } from "../../utils/i18n";
+import { validateRequired } from "../../utils/validation";
+/**
+ * Shared building blocks for the leaf field components.
+ * `base` is the BEM block name, e.g. 'mrd-text-field'.
+ */
+export const FieldLabel = ({ base, label, required }) => label ? h("label", { class: `${base}__label${required ? ` ${base}__label--required` : ''}` }, label) : null;
+export const FieldError = ({ base, error }) => error ? h("span", { class: `${base}__error` }, error) : null;
+/** Class string for the form control, with the --error modifier when applicable. */
+export function controlClass(base, hasError, element = 'input') {
+    return `${base}__${element}${hasError ? ` ${base}__${element}--error` : ''}`;
+}
+/** Returns the localised required-error, or '' when the value passes. */
+export function requiredError(value, required, locale) {
+    return required && !validateRequired(value) ? t('required', locale) : '';
+}

package/dist/collection/components/fields/file-upload-common.js

@@ -0,0 +1,38 @@
+import { t } from "../../utils/i18n";
+/**
+ * Shared upload behaviour for mrd-file-field and mrd-image-field:
+ * file validation, drop-zone class building and drag-drop wiring.
+ */
+/** Validates a selected/dropped file; returns a localised error message or '' when accepted. */
+export function validateUploadFile(file, maxSize, locale, requireImage = false) {
+    if (maxSize > 0 && file.size > maxSize)
+        return t('file_too_large', locale);
+    if (requireImage && !file.type.startsWith('image/'))
+        return t('invalid_image', locale);
+    return '';
+}
+/** BEM class string for the drop zone, e.g. base 'mrd-file-field' → 'mrd-file-field__zone …'. */
+export function uploadZoneClass(base, opts) {
+    return [
+        `${base}__zone`,
+        opts.dragging ? `${base}__zone--dragging` : '',
+        opts.error ? `${base}__zone--error` : '',
+        opts.disabled ? `${base}__zone--disabled` : '',
+    ].filter(Boolean).join(' ');
+}
+/** Drag-drop handlers for the drop zone; the component owns the dragging state and file handling. */
+export function makeDragHandlers(setDragging, onFile) {
+    return {
+        onDragOver: (e) => {
+            e.preventDefault();
+            setDragging(true);
+        },
+        onDragLeave: () => setDragging(false),
+        onDrop: (e) => {
+            var _a, _b, _c;
+            e.preventDefault();
+            setDragging(false);
+            onFile((_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);
+        },
+    };
+}

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

@@ -53,7 +53,7 @@
 }
 
 .mrd-boolean-field__toggle::after {
-  content: '';
+  content: "";
   position: absolute;
   top: 2px;
   left: 2px;
@@ -72,6 +72,6 @@
 }
 
 .mrd-boolean-field__text--required::after {
-  content: ' *';
+  content: " *";
   color: var(--mrd-color-danger);
-}
+}

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

@@ -20,7 +20,7 @@ export class MrdBooleanField {
         this.checked = !!this.value;
     }
     render() {
-        return (h(Host, { key: '38e65a1c7971912f8259d09281b272d7cbd446f2' }, h("div", { key: 'e10919998731d744cc2a13130c5f355c9b8fc9aa', class: "mrd-boolean-field" }, h("label", { key: 'db85a2c80cc62fdfd25237e3f5c7750bf1666819', class: "mrd-boolean-field__toggle-label" }, h("input", { key: 'cddd7004593fa4671abb89f4f805c4a009db99ef', class: "mrd-boolean-field__checkbox", type: "checkbox", name: this.name, checked: this.checked, disabled: this.disabled, onChange: this.handleChange, onBlur: this.handleBlur }), h("span", { key: 'f90f0ed6d74d6688e51b8d85a5397a0597d95ad8', class: "mrd-boolean-field__toggle", "aria-hidden": "true" }), this.label && (h("span", { key: '7e4582b1d9a5b08c00c220bec53baa6c14cbfe43', class: `mrd-boolean-field__text${this.required ? ' mrd-boolean-field__text--required' : ''}` }, this.label))))));
+        return (h(Host, { key: 'f7851813646d31c565c262bf3c8d4083177dd993' }, h("div", { key: '4b3c9f46e8b79bdc97ef5815afb85ba5ddde0c9a', class: "mrd-boolean-field" }, h("label", { key: 'f81fa28d5a79de0445c2c192352343f0807609a1', class: "mrd-boolean-field__toggle-label" }, h("input", { key: '510a4f5533cbe2741b8df34cb64fc739475a26cf', class: "mrd-boolean-field__checkbox", type: "checkbox", name: this.name, checked: this.checked, disabled: this.disabled, onChange: this.handleChange, onBlur: this.handleBlur }), h("span", { key: '949e042c8af0f2872cf973a0d5407fce972eb240', class: "mrd-boolean-field__toggle", "aria-hidden": "true" }), this.label && (h("span", { key: 'e8c52b5820887b2a8ec9a20eb7e4116a528d27d4', class: `mrd-boolean-field__text${this.required ? ' mrd-boolean-field__text--required' : ''}` }, this.label))))));
     }
     static get is() { return "mrd-boolean-field"; }
     static get encapsulation() { return "scoped"; }

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

@@ -16,9 +16,8 @@
   font-weight: var(--mrd-label-font-weight);
   color: var(--mrd-label-color);
 }
-
 .mrd-currency-field__label--required::after {
-  content: ' *';
+  content: " *";
   color: var(--mrd-color-danger);
 }
 
@@ -29,7 +28,8 @@
 }
 
 .mrd-currency-field__amount {
-  flex: 1;
+  display: block;
+  width: 100%;
   height: var(--mrd-input-height);
   padding: var(--mrd-input-padding-y) var(--mrd-input-padding-x);
   font-family: var(--mrd-font-family);
@@ -41,28 +41,30 @@
   transition: border-color var(--mrd-transition), box-shadow var(--mrd-transition);
   outline: none;
   appearance: none;
-  text-align: right;
   box-sizing: border-box;
 }
-
+.mrd-currency-field__amount::placeholder {
+  color: var(--mrd-input-placeholder-color);
+}
 .mrd-currency-field__amount:focus {
   border-color: var(--mrd-border-color-focus);
   box-shadow: var(--mrd-shadow-focus);
 }
-
 .mrd-currency-field__amount:disabled {
   background-color: var(--mrd-input-bg-disabled);
   cursor: not-allowed;
   opacity: 0.7;
 }
-
 .mrd-currency-field__amount--error {
   border-color: var(--mrd-border-color-error);
 }
-
 .mrd-currency-field__amount--error:focus {
   box-shadow: var(--mrd-shadow-focus-error);
 }
+.mrd-currency-field__amount {
+  flex: 1;
+  text-align: right;
+}
 
 .mrd-currency-field__currency {
   width: 90px;
@@ -97,4 +99,4 @@
   font-family: var(--mrd-font-family);
   font-size: var(--mrd-error-font-size);
   color: var(--mrd-error-color);
-}
+}

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

@@ -1,7 +1,6 @@
 import { Host, h } from "@stencil/core";
-import { t } from "../../utils/i18n";
-import { validateRequired } from "../../utils/validation";
-import { parseLocalizedNumber } from "../../utils/format";
+import { parseLocalizedNumber } from "../../../utils/format";
+import { FieldLabel, FieldError, controlClass, requiredError } from "../field-helpers";
 const COMMON_CURRENCIES = [
     'EUR', 'USD', 'GBP', 'CHF', 'JPY', 'CNY', 'AUD', 'CAD',
     'SEK', 'NOK', 'DKK', 'NZD', 'SGD', 'HKD', 'PLN', 'CZK',
@@ -24,12 +23,7 @@ export class MrdCurrencyField {
         this.handleAmountBlur = (e) => {
             const raw = e.target.value;
             const parsed = parseLocalizedNumber(raw, this.locale);
-            if (this.required && !validateRequired(raw)) {
-                this.error = t('required', this.locale);
-            }
-            else {
-                this.error = '';
-            }
+            this.error = requiredError(raw, this.required, this.locale);
             const val = { amount: parsed, currency: this.currency };
             this.mrdChange.emit({ name: this.name, value: val });
             this.mrdBlur.emit({ name: this.name, value: val });
@@ -48,7 +42,7 @@ export class MrdCurrencyField {
     }
     render() {
         const hasError = !!this.error;
-        return (h(Host, { key: 'fe3520c44d831caf36b388cb5968a9518b16cb8b' }, h("div", { key: '50c1fd2d53038e46da575d3e46e1ec26c2da423b', class: "mrd-currency-field" }, this.label && (h("label", { key: 'a2649d41bf6e3765c8a62ba6559c64c41615027a', class: `mrd-currency-field__label${this.required ? ' mrd-currency-field__label--required' : ''}` }, this.label)), h("div", { key: '952b51f315b4a5c05a8373ce3a3f1041086ba8b8', class: "mrd-currency-field__row" }, h("input", { key: '137a72ffc5d79fc8e0a8cf44c012d84a50c26d5b', class: `mrd-currency-field__amount${hasError ? ' mrd-currency-field__amount--error' : ''}`, type: "text", inputMode: "decimal", name: `${this.name}_amount`, value: this.amountDisplay, placeholder: "0.00", required: this.required, disabled: this.disabled, onInput: this.handleAmountInput, onBlur: this.handleAmountBlur }), h("select", { key: '1755854ca9b76dc4b41ad84b6b788685931ace36', class: "mrd-currency-field__currency", disabled: this.disabled, onChange: this.handleCurrencyChange }, COMMON_CURRENCIES.map(c => (h("option", { key: c, value: c, selected: c === this.currency }, c))))), hasError && h("span", { key: '0f10eb98c2e6444651d79d1de92acd0dbcc7133b', class: "mrd-currency-field__error" }, this.error))));
+        return (h(Host, { key: '24c530db6e0420af39fa0a35b31e966286f2d00c' }, h("div", { key: '795bc336425fbf1b86828f4a8f5df93930169a3c', class: "mrd-currency-field" }, h(FieldLabel, { key: 'b302cd9296c29ed5719b1f768bd5d4eea86f6406', base: "mrd-currency-field", label: this.label, required: this.required }), h("div", { key: '7efca51615f405ffd660e120accae32f55a9b5a0', class: "mrd-currency-field__row" }, h("input", { key: '5c6fd3549d5631fba49a8a701e6c3a1d0a672890', class: controlClass('mrd-currency-field', hasError, 'amount'), type: "text", inputMode: "decimal", name: `${this.name}_amount`, value: this.amountDisplay, placeholder: "0.00", required: this.required, disabled: this.disabled, onInput: this.handleAmountInput, onBlur: this.handleAmountBlur }), h("select", { key: '83ad5e92b623c3c60d161b8828e780adb476682c', class: "mrd-currency-field__currency", disabled: this.disabled, onChange: this.handleCurrencyChange }, COMMON_CURRENCIES.map(c => (h("option", { key: c, value: c, selected: c === this.currency }, c))))), h(FieldError, { key: 'b059290bb566b119c4f192e750b3e365446243e6', base: "mrd-currency-field", error: this.error }))));
     }
     static get is() { return "mrd-currency-field"; }
     static get encapsulation() { return "scoped"; }
@@ -113,7 +107,7 @@ export class MrdCurrencyField {
                     "references": {
                         "CurrencyValue": {
                             "location": "import",
-                            "path": "../../types",
+                            "path": "../../../types",
                             "id": "src/types/index.ts::CurrencyValue",
                             "referenceLocation": "CurrencyValue"
                         }
@@ -215,7 +209,7 @@ export class MrdCurrencyField {
                     "references": {
                         "CurrencyValue": {
                             "location": "import",
-                            "path": "../../types",
+                            "path": "../../../types",
                             "id": "src/types/index.ts::CurrencyValue",
                             "referenceLocation": "CurrencyValue"
                         }
@@ -237,7 +231,7 @@ export class MrdCurrencyField {
                     "references": {
                         "CurrencyValue": {
                             "location": "import",
-                            "path": "../../types",
+                            "path": "../../../types",
                             "id": "src/types/index.ts::CurrencyValue",
                             "referenceLocation": "CurrencyValue"
                         }

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

@@ -8,7 +8,6 @@
   gap: var(--mrd-space-1);
   width: 100%;
 }
-
 .mrd-date-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-date-field__label--required::after {
-  content: ' *';
+  content: " *";
   color: var(--mrd-color-danger);
 }
-
 .mrd-date-field__input {
   display: block;
   width: 100%;
@@ -37,30 +34,31 @@
   outline: none;
   appearance: none;
   box-sizing: border-box;
-  cursor: pointer;
 }
-
+.mrd-date-field__input::placeholder {
+  color: var(--mrd-input-placeholder-color);
+}
 .mrd-date-field__input:focus {
   border-color: var(--mrd-border-color-focus);
   box-shadow: var(--mrd-shadow-focus);
 }
-
 .mrd-date-field__input:disabled {
   background-color: var(--mrd-input-bg-disabled);
   cursor: not-allowed;
   opacity: 0.7;
 }
-
 .mrd-date-field__input--error {
   border-color: var(--mrd-border-color-error);
 }
-
 .mrd-date-field__input--error:focus {
   box-shadow: var(--mrd-shadow-focus-error);
 }
-
 .mrd-date-field__error {
   font-family: var(--mrd-font-family);
   font-size: var(--mrd-error-font-size);
   color: var(--mrd-error-color);
 }
+
+.mrd-date-field__input {
+  cursor: pointer;
+}

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

@@ -1,6 +1,5 @@
 import { Host, h } from "@stencil/core";
-import { t } from "../../utils/i18n";
-import { validateRequired } from "../../utils/validation";
+import { FieldLabel, FieldError, controlClass, requiredError } from "../field-helpers";
 export class MrdDateField {
     constructor() {
         this.name = '';
@@ -12,12 +11,7 @@ export class MrdDateField {
         this.error = '';
         this.handleChange = (e) => {
             const val = e.target.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 });
         };
         this.handleBlur = (e) => {
@@ -26,8 +20,7 @@ export class MrdDateField {
         };
     }
     render() {
-        const hasError = !!this.error;
-        return (h(Host, { key: '2c0dc2311068a5c759fe8efe58a98a71a9cf4b7b' }, h("div", { key: 'ee1cc0e9a2943cc42439825b8f21cd3492eaca05', class: "mrd-date-field" }, this.label && (h("label", { key: '3f836a991e676b6070a8b3800edfce00cc0d3b3d', class: `mrd-date-field__label${this.required ? ' mrd-date-field__label--required' : ''}` }, this.label)), h("input", { key: '575185661987eea3dc91950f51995b2cc75debea', class: `mrd-date-field__input${hasError ? ' mrd-date-field__input--error' : ''}`, type: "date", name: this.name, value: this.value, required: this.required, disabled: this.disabled, onChange: this.handleChange, onBlur: this.handleBlur }), hasError && h("span", { key: '480ec99200989f3dc543d9afc648d83d31992b3c', class: "mrd-date-field__error" }, this.error))));
+        return (h(Host, { key: '71be9e4bcc87b40cf3b777d3fe0bff23c1a0fa94' }, h("div", { key: '40ced03df5d4185264ba9d03c832b3870ce8ae19', class: "mrd-date-field" }, h(FieldLabel, { key: 'd85ec7c4617a22c8c5862253e8090c85484f8c41', base: "mrd-date-field", label: this.label, required: this.required }), h("input", { key: 'c9211fdefdd9527c7ff40ed9de33153303fc1742', class: controlClass('mrd-date-field', !!this.error), type: "date", name: this.name, value: this.value, required: this.required, disabled: this.disabled, onChange: this.handleChange, onBlur: this.handleBlur }), h(FieldError, { key: '9dd64475bf8a77bea5344faa71f20485b34b86f9', base: "mrd-date-field", error: this.error }))));
     }
     static get is() { return "mrd-date-field"; }
     static get encapsulation() { return "scoped"; }

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

@@ -8,7 +8,6 @@
   gap: var(--mrd-space-1);
   width: 100%;
 }
-
 .mrd-datetime-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-datetime-field__label--required::after {
-  content: ' *';
+  content: " *";
   color: var(--mrd-color-danger);
 }
-
 .mrd-datetime-field__input {
   display: block;
   width: 100%;
@@ -37,30 +34,31 @@
   outline: none;
   appearance: none;
   box-sizing: border-box;
-  cursor: pointer;
 }
-
+.mrd-datetime-field__input::placeholder {
+  color: var(--mrd-input-placeholder-color);
+}
 .mrd-datetime-field__input:focus {
   border-color: var(--mrd-border-color-focus);
   box-shadow: var(--mrd-shadow-focus);
 }
-
 .mrd-datetime-field__input:disabled {
   background-color: var(--mrd-input-bg-disabled);
   cursor: not-allowed;
   opacity: 0.7;
 }
-
 .mrd-datetime-field__input--error {
   border-color: var(--mrd-border-color-error);
 }
-
 .mrd-datetime-field__input--error:focus {
   box-shadow: var(--mrd-shadow-focus-error);
 }
-
 .mrd-datetime-field__error {
   font-family: var(--mrd-font-family);
   font-size: var(--mrd-error-font-size);
   color: var(--mrd-error-color);
 }
+
+.mrd-datetime-field__input {
+  cursor: pointer;
+}

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

@@ -1,6 +1,5 @@
 import { Host, h } from "@stencil/core";
-import { t } from "../../utils/i18n";
-import { validateRequired } from "../../utils/validation";
+import { FieldLabel, FieldError, controlClass, requiredError } from "../field-helpers";
 export class MrdDatetimeField {
     constructor() {
         this.name = '';
@@ -14,12 +13,7 @@ export class MrdDatetimeField {
         this.handleChange = (e) => {
             const localVal = e.target.value;
             this.localValue = localVal;
-            if (this.required && !validateRequired(localVal)) {
-                this.error = t('required', this.locale);
-            }
-            else {
-                this.error = '';
-            }
+            this.error = requiredError(localVal, this.required, this.locale);
             this.mrdChange.emit({ name: this.name, value: this.localToUtc(localVal) });
         };
         this.handleBlur = (e) => {
@@ -53,8 +47,7 @@ export class MrdDatetimeField {
         return d.toISOString().replace(/\.\d{3}Z$/, 'Z');
     }
     render() {
-        const hasError = !!this.error;
-        return (h(Host, { key: 'ea8b3b68100ffdb316bc5048f82d85d238bb2e4b' }, h("div", { key: 'c192c6998ee474aaf4df7b3b97ae0bd61f6d624d', class: "mrd-datetime-field" }, this.label && (h("label", { key: '1fbd66c17d76508f0d698a2c258be6779e98d85e', class: `mrd-datetime-field__label${this.required ? ' mrd-datetime-field__label--required' : ''}` }, this.label)), h("input", { key: 'fc9612c062a1cab5076a06598cabf227adce996c', class: `mrd-datetime-field__input${hasError ? ' mrd-datetime-field__input--error' : ''}`, type: "datetime-local", name: this.name, value: this.localValue, required: this.required, disabled: this.disabled, onChange: this.handleChange, onBlur: this.handleBlur }), hasError && h("span", { key: '8788ac01739302f6ad61010b238ff38d45e1b68a', class: "mrd-datetime-field__error" }, this.error))));
+        return (h(Host, { key: 'ac07ec2ba79cde998d1247e9d71de336c0e72a64' }, h("div", { key: '8144cf68c4b6b9cbc8396903b84bb355f380ceda', class: "mrd-datetime-field" }, h(FieldLabel, { key: '972686469f68c932e33b8d2c3806422553a3cce3', base: "mrd-datetime-field", label: this.label, required: this.required }), h("input", { key: '370b6032c38fbee22e662c1b2871f96b53b58956', class: controlClass('mrd-datetime-field', !!this.error), type: "datetime-local", name: this.name, value: this.localValue, required: this.required, disabled: this.disabled, onChange: this.handleChange, onBlur: this.handleBlur }), h(FieldError, { key: 'b7a812f82a6b0d2c938aa1f1c2494df685258555', base: "mrd-datetime-field", error: this.error }))));
     }
     static get is() { return "mrd-datetime-field"; }
     static get encapsulation() { return "scoped"; }

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

@@ -8,7 +8,6 @@
   gap: var(--mrd-space-1);
   width: 100%;
 }
-
 .mrd-email-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-email-field__label--required::after {
-  content: ' *';
+  content: " *";
   color: var(--mrd-color-danger);
 }
-
 .mrd-email-field__input {
   display: block;
   width: 100%;
@@ -38,32 +35,26 @@
   appearance: none;
   box-sizing: border-box;
 }
-
 .mrd-email-field__input::placeholder {
   color: var(--mrd-input-placeholder-color);
 }
-
 .mrd-email-field__input:focus {
   border-color: var(--mrd-border-color-focus);
   box-shadow: var(--mrd-shadow-focus);
 }
-
 .mrd-email-field__input:disabled {
   background-color: var(--mrd-input-bg-disabled);
   cursor: not-allowed;
   opacity: 0.7;
 }
-
 .mrd-email-field__input--error {
   border-color: var(--mrd-border-color-error);
 }
-
 .mrd-email-field__input--error:focus {
   box-shadow: var(--mrd-shadow-focus-error);
 }
-
 .mrd-email-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-email-field → fields/mrd-email-field}/mrd-email-field.js

@@ -1,6 +1,7 @@
 import { Host, h } from "@stencil/core";
-import { t } from "../../utils/i18n";
-import { validateRequired, validateEmail } from "../../utils/validation";
+import { t } from "../../../utils/i18n";
+import { validateEmail } from "../../../utils/validation";
+import { FieldLabel, FieldError, controlClass, requiredError } from "../field-helpers";
 export class MrdEmailField {
     constructor() {
         this.name = '';
@@ -17,21 +18,13 @@ export class MrdEmailField {
         };
         this.handleBlur = (e) => {
             const val = e.target.value;
-            if (this.required && !validateRequired(val)) {
-                this.error = t('required', this.locale);
-            }
-            else if (val && !validateEmail(val)) {
-                this.error = t('invalid_email', this.locale);
-            }
-            else {
-                this.error = '';
-            }
+            this.error = requiredError(val, this.required, this.locale)
+                || (val && !validateEmail(val) ? t('invalid_email', this.locale) : '');
             this.mrdBlur.emit({ name: this.name, value: val });
         };
     }
     render() {
-        const hasError = !!this.error;
-        return (h(Host, { key: '0d442ab2a711c26c83fcdbf0fd8cd006d8dd8649' }, h("div", { key: 'ceb2a80679514c4c5b888fe096c90ed6cc973f64', class: "mrd-email-field" }, this.label && (h("label", { key: '663f95eff1002ee56cfc3104514bf31b47e26750', class: `mrd-email-field__label${this.required ? ' mrd-email-field__label--required' : ''}` }, this.label)), h("input", { key: '42dbdec25a47b37cfd68d00d0b8a481f96fe8241', class: `mrd-email-field__input${hasError ? ' mrd-email-field__input--error' : ''}`, type: "email", name: this.name, value: this.value, placeholder: this.placeholder || 'name@example.com', required: this.required, disabled: this.disabled, onInput: this.handleInput, onBlur: this.handleBlur }), hasError && h("span", { key: '626ee856ceaa7051fb9dd1de8b7cbd708e83f617', class: "mrd-email-field__error" }, this.error))));
+        return (h(Host, { key: '93f7c4975c24e6001e772f2858344edec04cda10' }, h("div", { key: '4f49a2a1f68a4161762861c5d54fd3690c88ac5d', class: "mrd-email-field" }, h(FieldLabel, { key: '23b20799f3e7c04889b7bc3a271e61b0bb5d7537', base: "mrd-email-field", label: this.label, required: this.required }), h("input", { key: '0fc452bfb9295a80102eeed4b32bcc9475c9d17b', class: controlClass('mrd-email-field', !!this.error), type: "email", name: this.name, value: this.value, placeholder: this.placeholder || 'name@example.com', required: this.required, disabled: this.disabled, onInput: this.handleInput, onBlur: this.handleBlur }), h(FieldError, { key: '34945fff9c69cf2f0aeb56492c95052250514d5c', base: "mrd-email-field", error: this.error }))));
     }
     static get is() { return "mrd-email-field"; }
     static get encapsulation() { return "scoped"; }