@mmlogic/components 0.3.11 → 0.4.1

package/dist/collection/components/{mrd-textarea-field → fields/mrd-textarea-field}/mrd-textarea-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 MrdTextareaField {
     constructor() {
         this.name = '';
@@ -49,12 +48,7 @@ export class MrdTextareaField {
                 var _a, _b;
                 if (!range) {
                     const html = (_b = (_a = this.editorEl.querySelector('.ql-editor')) === null || _a === void 0 ? void 0 : _a.innerHTML) !== null && _b !== void 0 ? _b : '';
-                    if (this.required && !validateRequired(html)) {
-                        this.error = t('required', this.locale);
-                    }
-                    else {
-                        this.error = '';
-                    }
+                    this.error = requiredError(html, this.required, this.locale);
                     this.mrdBlur.emit({ name: this.name, value: html });
                 }
             });
@@ -66,7 +60,7 @@ export class MrdTextareaField {
         }
     }
     render() {
-        return (h(Host, { key: 'fe7824c81e082c3f2c1cf18c11dde20cb1f40f2c' }, h("div", { key: 'adf394a7e146d16bc79006873a209b11d88b2e17', class: "mrd-textarea-field" }, this.label && (h("label", { key: '1b0dd2b4cf26c55a0af05c67a3178edc0c9d56c4', class: `mrd-textarea-field__label${this.required ? ' mrd-textarea-field__label--required' : ''}` }, this.label)), h("div", { key: '7c8fe88b222af0beed08db492aa9f6d890e0dc5b', class: `mrd-textarea-field__container${this.error ? ' mrd-textarea-field__container--error' : ''}` }, h("div", { key: '295968283e94812cb04660117c5bdeaf3647469c', class: "mrd-textarea-field__editor" })), this.error && h("span", { key: '5b5ab61053ab0792d4c249de04bd1d13b51469bf', class: "mrd-textarea-field__error" }, this.error))));
+        return (h(Host, { key: '464c1edde8447043d9352f1b5f9757bba97e9b17' }, h("div", { key: '8d06728214f54feeb1063700e5aaf7c439eb5473', class: "mrd-textarea-field" }, h(FieldLabel, { key: 'dbf93ecf41bd704706b49f8c455262798fbbe10b', base: "mrd-textarea-field", label: this.label, required: this.required }), h("div", { key: '9c39ccfa38ee01b880973966e910ee32aa60b144', class: controlClass('mrd-textarea-field', !!this.error, 'container') }, h("div", { key: '0217cd4350c1933018b2b8f489516b6d43a52538', class: "mrd-textarea-field__editor" })), h(FieldError, { key: '62d2a5db053ea6e4ec6868440f3ab31e1c05e633', base: "mrd-textarea-field", error: this.error }))));
     }
     static get is() { return "mrd-textarea-field"; }
     static get encapsulation() { return "scoped"; }

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

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

package/dist/collection/components/{mrd-time-field → fields/mrd-time-field}/mrd-time-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 MrdTimeField {
     constructor() {
         this.name = '';
@@ -12,12 +11,7 @@ export class MrdTimeField {
         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 MrdTimeField {
         };
     }
     render() {
-        const hasError = !!this.error;
-        return (h(Host, { key: '579219a478e31325b5a676465807c1d936724a2b' }, h("div", { key: '51b25f6e083a29989505c0ad79edbcd3b0060736', class: "mrd-time-field" }, this.label && (h("label", { key: '67d98bebb8803deea2d2a4a63f36706789ccd8c7', class: `mrd-time-field__label${this.required ? ' mrd-time-field__label--required' : ''}` }, this.label)), h("input", { key: '734741e0db1bdd5886fef37bba3b2f8d7200a0ab', class: `mrd-time-field__input${hasError ? ' mrd-time-field__input--error' : ''}`, type: "time", name: this.name, value: this.value, required: this.required, disabled: this.disabled, onChange: this.handleChange, onBlur: this.handleBlur }), hasError && h("span", { key: '0dbd168d14966dc56a77c97cd8fd8f9b208a4bf5', class: "mrd-time-field__error" }, this.error))));
+        return (h(Host, { key: 'fc30bdeb7c8d37bebc67a768f48013602879fb3d' }, h("div", { key: '52f899a889376773c1948f0c116670684db25cf4', class: "mrd-time-field" }, h(FieldLabel, { key: '3aba58f122fa4bb9f0ba4ad0b56fc3b29f03d4a3', base: "mrd-time-field", label: this.label, required: this.required }), h("input", { key: 'e39718394a195eafaf47aa2e62d560341bb0daed', class: controlClass('mrd-time-field', !!this.error), type: "time", name: this.name, value: this.value, required: this.required, disabled: this.disabled, onChange: this.handleChange, onBlur: this.handleBlur }), h(FieldError, { key: '07ad4ccbc5188e129d8bd3085e856839ec6a81c9', base: "mrd-time-field", error: this.error }))));
     }
     static get is() { return "mrd-time-field"; }
     static get encapsulation() { return "scoped"; }

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

@@ -115,4 +115,4 @@
 
 .mrd-field__history-editor-add:hover {
   background-color: var(--mrd-color-primary-light);
-}
+}

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

@@ -1,6 +1,6 @@
 import { Host, h } from "@stencil/core";
-import { ClientLayoutItemType, ClientLayoutItemFieldDataType, ClientLayoutItemRelationDisplayType, } from "../../types";
-import { t } from "../../utils/i18n";
+import { ClientLayoutItemType, ClientLayoutItemFieldDataType, ClientLayoutItemRelationDisplayType, } from "../../../types";
+import { t } from "../../../utils/i18n";
 export class MrdField {
     constructor() {
         this.locale = navigator.language;
@@ -194,7 +194,7 @@ export class MrdField {
                     "references": {
                         "ClientLayoutItem": {
                             "location": "import",
-                            "path": "../../types",
+                            "path": "../../../types",
                             "id": "src/types/index.ts::ClientLayoutItem",
                             "referenceLocation": "ClientLayoutItem"
                         }

package/dist/collection/components/{mrd-form/mrd-form.scss → form/mrd-form/mrd-form.css}

@@ -145,4 +145,4 @@
 
 .mrd-form__cancel:active {
   background-color: var(--mrd-color-neutral-200);
-}
+}

package/dist/collection/components/{mrd-form → form/mrd-form}/mrd-form.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
-import { ClientLayoutItemType, ClientLayoutItemRelationEditBehavior } from "../../types";
-import { t } from "../../utils/i18n";
-import { validateRequired } from "../../utils/validation";
+import { ClientLayoutItemType, ClientLayoutItemRelationEditBehavior } from "../../../types";
+import { t } from "../../../utils/i18n";
+import { validateRequired } from "../../../utils/validation";
 export class MrdForm {
     constructor() {
         this.locale = navigator.language;
@@ -375,7 +375,7 @@ export class MrdForm {
                     "references": {
                         "ClientLayout": {
                             "location": "import",
-                            "path": "../../types",
+                            "path": "../../../types",
                             "id": "src/types/index.ts::ClientLayout",
                             "referenceLocation": "ClientLayout"
                         }
@@ -502,7 +502,7 @@ export class MrdForm {
                     "references": {
                         "RelationSearchResult": {
                             "location": "import",
-                            "path": "../../types",
+                            "path": "../../../types",
                             "id": "src/types/index.ts::RelationSearchResult",
                             "referenceLocation": "RelationSearchResult"
                         }

package/dist/collection/components/layout/mrd-layout-section/field-value.js

@@ -0,0 +1,111 @@
+import { h } from "@stencil/core";
+import { ClientLayoutItemFieldDataType } from "../../../types/client-layout";
+import { CellRenderer } from "../../../utils/cell-renderer";
+import { t } from "../../../utils/i18n";
+import { formatDate } from "../../../utils/format";
+/** FILE and IMAGE cells share the same download button. */
+function downloadLink(ctx, href, fileName, label) {
+    return (h("button", { class: "mrd-layout-section__download-link", onClick: () => href && ctx.on.download({ href, fileName }) }, h("svg", { class: "mrd-layout-section__file-icon", viewBox: "0 0 24 24", "aria-hidden": "true" }, h("path", { fill: "currentColor", d: "M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm-1 7V3.5L18.5 9H13zm-3 8l-3-3 1.41-1.41L10 14.17l4.59-4.58L16 11l-6 6z" })), label));
+}
+function renderSingleFieldValue(ctx, item, value) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    const dt = item.dataType;
+    switch (dt) {
+        case ClientLayoutItemFieldDataType.HYPERLINK: {
+            const v = value;
+            const href = (_a = v === null || v === void 0 ? void 0 : v.href) !== null && _a !== void 0 ? _a : String(value);
+            const label = (_d = (_c = (_b = v === null || v === void 0 ? void 0 : v.name) !== null && _b !== void 0 ? _b : v === null || v === void 0 ? void 0 : v.text) !== null && _c !== void 0 ? _c : v === null || v === void 0 ? void 0 : v.label) !== null && _d !== void 0 ? _d : href;
+            return (h("a", { class: "mrd-layout-section__link", href: href, target: "_blank", rel: "noopener noreferrer" }, label));
+        }
+        case ClientLayoutItemFieldDataType.TEXTBLOCK:
+            return h("div", { class: "mrd-layout-section__prose", innerHTML: String(value) });
+        case ClientLayoutItemFieldDataType.LONGTEXT:
+            return h("pre", { class: "mrd-layout-section__pre" }, String(value));
+        case ClientLayoutItemFieldDataType.JSON:
+            return h("pre", { class: "mrd-layout-section__pre", innerHTML: CellRenderer.formatJson(value) });
+        case ClientLayoutItemFieldDataType.FILE: {
+            const v = value;
+            const fileName = (_e = v === null || v === void 0 ? void 0 : v.fileName) !== null && _e !== void 0 ? _e : String(value);
+            const href = (_f = v === null || v === void 0 ? void 0 : v.href) !== null && _f !== void 0 ? _f : '';
+            return downloadLink(ctx, href, fileName, t('download', ctx.locale));
+        }
+        case ClientLayoutItemFieldDataType.IMAGE: {
+            const v = value;
+            const href = (_g = v === null || v === void 0 ? void 0 : v.href) !== null && _g !== void 0 ? _g : '';
+            const fileName = (_h = v === null || v === void 0 ? void 0 : v.fileName) !== null && _h !== void 0 ? _h : '';
+            const previewUrl = ctx.imagePreviews[item.name];
+            if (previewUrl) {
+                return (h("button", { class: "mrd-layout-section__image-thumb-btn", onClick: () => ctx.on.openImage(previewUrl), title: fileName || undefined }, h("img", { class: "mrd-layout-section__image-thumb", src: previewUrl, alt: fileName })));
+            }
+            return downloadLink(ctx, href, fileName, fileName || href);
+        }
+        case ClientLayoutItemFieldDataType.BOOLEAN:
+            return (h("span", { class: `mrd-layout-section__boolean mrd-layout-section__boolean--${value ? 'true' : 'false'}` }, value ? t('yes', ctx.locale) : t('no', ctx.locale)));
+        case ClientLayoutItemFieldDataType.LIST: {
+            const listItem = ((_j = item.listItems) !== null && _j !== void 0 ? _j : []).find(li => li.key === String(value));
+            const label = (_k = listItem === null || listItem === void 0 ? void 0 : listItem.label) !== null && _k !== void 0 ? _k : String(value);
+            const color = listItem === null || listItem === void 0 ? void 0 : listItem.color;
+            const bg = listItem === null || listItem === void 0 ? void 0 : listItem.backgroundColor;
+            if (color && bg) {
+                return (h("span", { class: "mrd-layout-section__badge", style: { color, backgroundColor: bg } }, label));
+            }
+            if (color) {
+                return (h("span", { class: "mrd-layout-section__badge-dot-row" }, h("span", { class: "mrd-layout-section__badge-dot", style: { backgroundColor: color } }), label));
+            }
+            return label;
+        }
+        case ClientLayoutItemFieldDataType.SECRET:
+            return value ? h("span", { class: "mrd-layout-section__secret-masked" }, '••••••••') : null;
+        default: {
+            const text = CellRenderer.renderValue(dt, value, (_l = item.listItems) !== null && _l !== void 0 ? _l : [], ctx.locale);
+            return text || null;
+        }
+    }
+}
+export function renderFieldValue(ctx, item, rawValue) {
+    if (rawValue == null || rawValue === '')
+        return null;
+    if (item.multiple && Array.isArray(rawValue)) {
+        const rendered = rawValue.map(v => renderSingleFieldValue(ctx, item, v));
+        if (rendered.every(r => typeof r === 'string' || r == null)) {
+            return rendered.filter(Boolean).join(', ') || null;
+        }
+        return (h("span", null, rendered.map((r, i) => (h("span", { key: String(i) }, r, i < rendered.length - 1 ? ', ' : '')))));
+    }
+    return renderSingleFieldValue(ctx, item, rawValue);
+}
+function renderHistoryBadge(ctx, item, raw) {
+    var _a, _b, _c;
+    const hist = (_a = item.historyEnabled) !== null && _a !== void 0 ? _a : (_b = item.field) === null || _b === void 0 ? void 0 : _b.historyEnabled;
+    if (!hist || !item.name)
+        return null;
+    const history = (_c = raw === null || raw === void 0 ? void 0 : raw.history) !== null && _c !== void 0 ? _c : [];
+    if (!history.length)
+        return null;
+    const sorted = [...history].sort((a, b) => b.until.localeCompare(a.until));
+    const isOpen = ctx.openHistoryField === item.name;
+    return (h("span", { class: "mrd-layout-section__history-wrap" }, h("button", { type: "button", class: "mrd-layout-section__history-btn", title: t('history_badge_tooltip', ctx.locale), "aria-label": t('history_badge_tooltip', ctx.locale), onClick: (e) => {
+            e.stopPropagation();
+            ctx.on.toggleHistory(isOpen ? null : item.name);
+        } }, h("svg", { class: "mrd-layout-section__history-icon", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true" }, h("path", { "fill-rule": "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm.75-13a.75.75 0 00-1.5 0v5c0 .207.085.394.22.53l2.5 2.5a.75.75 0 101.06-1.06L10.75 9.69V5z", "clip-rule": "evenodd" }))), isOpen && (h("div", { class: "mrd-layout-section__history-popover", role: "listbox" }, sorted.map((entry, i) => (h("div", { key: String(i), class: "mrd-layout-section__history-entry" }, entry.value, " (", t('history_until', ctx.locale), " ", formatDate(entry.until, ctx.locale), ")")))))));
+}
+export function renderField(ctx, item) {
+    var _a, _b;
+    if (!item.name)
+        return null;
+    const raw = ctx.data[item.name];
+    const hist = (_a = item.historyEnabled) !== null && _a !== void 0 ? _a : (_b = item.field) === null || _b === void 0 ? void 0 : _b.historyEnabled;
+    const rawValue = hist && raw !== null && typeof raw === 'object' && 'current' in raw
+        ? raw.current
+        : raw;
+    const renderedValue = renderFieldValue(ctx, item, rawValue);
+    if (item.header) {
+        return (h("h1", { class: "mrd-layout-section__field-header", key: item.name }, typeof renderedValue === 'string' ? renderedValue : rawValue != null ? String(rawValue) : item.label));
+    }
+    if (renderedValue == null)
+        return null;
+    const isBlock = item.dataType === ClientLayoutItemFieldDataType.TEXTBLOCK
+        || item.dataType === ClientLayoutItemFieldDataType.LONGTEXT
+        || item.dataType === ClientLayoutItemFieldDataType.JSON;
+    return (h("div", { class: `mrd-layout-section__field${isBlock ? ' mrd-layout-section__field--block' : ''}`, key: item.name }, h("span", { class: "mrd-layout-section__field-label" }, item.label), h("span", { class: "mrd-layout-section__field-value" }, renderedValue, renderHistoryBadge(ctx, item, raw))));
+}

package/dist/collection/components/layout/mrd-layout-section/layout-helpers.js

@@ -0,0 +1,29 @@
+import { ClientLayoutItemType } from "../../../types/client-layout";
+/** Key an embedded view is addressed by (setViewPage etc.). */
+export function viewKeyFor(item) {
+    var _a, _b, _c, _d;
+    if (item.type === ClientLayoutItemType.RELATED_VIEW)
+        return (_b = (_a = item.relatedClass) !== null && _a !== void 0 ? _a : item.name) !== null && _b !== void 0 ? _b : '';
+    return (_d = (_c = item.dataClass) !== null && _c !== void 0 ? _c : item.name) !== null && _d !== void 0 ? _d : '';
+}
+/** Depth-first flatten of the SECTION/GROUP tree. */
+export function flattenItems(items) {
+    const result = [];
+    for (const item of items) {
+        result.push(item);
+        if (item.items)
+            result.push(...flattenItems(item.items));
+    }
+    return result;
+}
+/** Build the canonical parent href `/{base}/{tenant}/{fromClass}/{parentId}` from
+ *  the object's self href. Empty unless it is a RELATED_VIEW with a fromClass. */
+export function buildContainerHref(item, selfHref, parentId) {
+    if (item.type !== ClientLayoutItemType.RELATED_VIEW || !item.fromClass || !parentId)
+        return '';
+    const segs = selfHref.split('/').filter(Boolean);
+    if (segs.length < 2)
+        return '';
+    const [base, tenant] = segs;
+    return `/${base}/${tenant}/${item.fromClass}/${parentId}`;
+}

package/dist/collection/components/{mrd-layout-section/mrd-layout-section.scss → layout/mrd-layout-section/mrd-layout-section.css}

@@ -238,7 +238,7 @@
   border-radius: var(--mrd-border-radius);
   padding: var(--mrd-space-3);
   margin: 0;
-  max-height: calc(10 * 1.5 * var(--mrd-font-size-xs));
+  max-height: calc(15 * var(--mrd-font-size-xs));
   overflow-x: auto;
   overflow-y: auto;
   white-space: pre-wrap;
@@ -401,7 +401,7 @@
 
 .mrd-layout-section__modal {
   position: relative;
-  background: #fff;
+  background: var(--mrd-color-white);
   border-radius: var(--mrd-border-radius);
   padding: var(--mrd-space-3);
   max-width: min(90vw, 900px);
@@ -424,7 +424,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #fff;
+  color: var(--mrd-color-white);
   cursor: pointer;
   font-size: var(--mrd-font-size-sm);
   line-height: 1;
@@ -441,4 +441,4 @@
   max-height: calc(90vh - 2rem);
   border-radius: var(--mrd-border-radius);
   object-fit: contain;
-}
+}