@mmlogic/components 0.3.11 → 0.4.0

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

@@ -1,8 +1,7 @@
 import { Host, h } from "@stencil/core";
-import { ClientLayoutItemType, ClientLayoutItemFieldDataType, resolveArchetype, ARCHETYPE_DOCUMENT, } from "../../types/client-layout";
-import { CellRenderer } from "../../utils/cell-renderer";
-import { t } from "../../utils/i18n";
-import { formatDate } from "../../utils/format";
+import { ClientLayoutItemType, ClientLayoutItemFieldDataType, resolveArchetype, ARCHETYPE_DOCUMENT, } from "../../../types/client-layout";
+import { viewKeyFor, flattenItems, buildContainerHref } from "./layout-helpers";
+import { renderField } from "./field-value";
 export class MrdLayoutSection {
     constructor() {
         /** Items from one layout entry in ClientDashboardMetadata.layouts[]. */
@@ -71,14 +70,8 @@ export class MrdLayoutSection {
             }
         }
     }
-    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 : '';
-    }
     emitLoadImages() {
-        for (const item of this.flattenItems(this.items)) {
+        for (const item of flattenItems(this.items)) {
             if (item.type === ClientLayoutItemType.FIELD && item.dataType === ClientLayoutItemFieldDataType.IMAGE) {
                 const fieldName = item.name;
                 const raw = this.data[fieldName];
@@ -88,15 +81,6 @@ export class MrdLayoutSection {
             }
         }
     }
-    flattenItems(items) {
-        const result = [];
-        for (const item of items) {
-            result.push(item);
-            if (item.items)
-                result.push(...this.flattenItems(item.items));
-        }
-        return result;
-    }
     /** Inject search results. Pass dataClass to target a specific SEARCH item; omit when there is only one. */
     async setSearchResults(results, dataClass) {
         const key = dataClass !== null && dataClass !== void 0 ? dataClass : this.resolveSearchKey();
@@ -162,113 +146,26 @@ export class MrdLayoutSection {
     }
     resolveSearchKey() {
         var _a;
-        const items = this.flattenItems(this.items).filter(i => i.type === ClientLayoutItemType.SEARCH);
+        const items = flattenItems(this.items).filter(i => i.type === ClientLayoutItemType.SEARCH);
         if (items.length === 1)
             return (_a = items[0].dataClass) !== null && _a !== void 0 ? _a : null;
         return null;
     }
-    renderSingleFieldValue(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 (h("button", { class: "mrd-layout-section__download-link", onClick: () => href && this.mrdDownload.emit({ 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" })), t('download', this.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 = this.imagePreviews[item.name];
-                if (previewUrl) {
-                    return (h("button", { class: "mrd-layout-section__image-thumb-btn", onClick: () => { this.imagePreviewUrl = previewUrl; }, title: fileName || undefined }, h("img", { class: "mrd-layout-section__image-thumb", src: previewUrl, alt: fileName })));
-                }
-                return (h("button", { class: "mrd-layout-section__download-link", onClick: () => href && this.mrdDownload.emit({ 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" })), fileName || href));
-            }
-            case ClientLayoutItemFieldDataType.BOOLEAN:
-                return (h("span", { class: `mrd-layout-section__boolean mrd-layout-section__boolean--${value ? 'true' : 'false'}` }, value ? t('yes', this.locale) : t('no', this.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 : [], this.locale);
-                return text || null;
-            }
-        }
-    }
-    renderFieldValue(item, rawValue) {
-        if (rawValue == null || rawValue === '')
-            return null;
-        if (item.multiple && Array.isArray(rawValue)) {
-            const rendered = rawValue.map(v => this.renderSingleFieldValue(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 this.renderSingleFieldValue(item, rawValue);
-    }
-    renderHistoryBadge(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 = this.openHistoryField === item.name;
-        const { locale } = this;
-        return (h("span", { class: "mrd-layout-section__history-wrap" }, h("button", { type: "button", class: "mrd-layout-section__history-btn", title: t('history_badge_tooltip', locale), "aria-label": t('history_badge_tooltip', locale), onClick: (e) => {
-                e.stopPropagation();
-                this.openHistoryField = 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', locale), " ", formatDate(entry.until, locale), ")")))))));
+    fieldCtx() {
+        return {
+            locale: this.locale,
+            data: this.data,
+            imagePreviews: this.imagePreviews,
+            openHistoryField: this.openHistoryField,
+            on: {
+                download: detail => this.mrdDownload.emit(detail),
+                openImage: url => { this.imagePreviewUrl = url; },
+                toggleHistory: fieldName => { this.openHistoryField = fieldName; },
+            },
+        };
     }
     renderField(item) {
-        var _a, _b;
-        if (!item.name)
-            return null;
-        const raw = this.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 = this.renderFieldValue(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, this.renderHistoryBadge(item, raw))));
+        return renderField(this.fieldCtx(), item);
     }
     renderRelation(item) {
         var _a, _b, _c;
@@ -301,7 +198,7 @@ export class MrdLayoutSection {
     }
     renderRelatedView(item) {
         var _a, _b, _c, _d, _e, _f, _g, _h;
-        const key = this.viewKeyFor(item);
+        const key = viewKeyFor(item);
         if (!key)
             return null;
         if (!item.view)
@@ -316,22 +213,11 @@ export class MrdLayoutSection {
         // Canonical parent href for single-container seeding: use the RELATED_VIEW's
         // fromClass (base class) rather than the route class, so polymorphic subtypes
         // resolve to the same container the documents actually reference.
-        const containerHref = this.buildContainerHref(item, selfHref, parentId);
+        const containerHref = buildContainerHref(item, selfHref, parentId);
         return (h("div", { class: "mrd-layout-section__related-view", key: `view-${key}` }, showTitle && item.label && h("h3", { class: "mrd-layout-section__related-view-title" }, item.label), docArchetype
             ? this.renderDocumentContainer(item, key, parentId, docArchetype, containerHref)
             : this.renderTable(item, key, parentId)));
     }
-    /** 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. */
-    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}`;
-    }
     /** Document collection view: owns the view-switch + collection actions and
      *  swaps between the folder tree and the flat table. Events are re-emitted to
      *  the host with the view key, exactly as the raw list/table events were. */
@@ -432,7 +318,7 @@ export class MrdLayoutSection {
     }
     render() {
         const docArchetype = resolveArchetype(this.archetypes, ARCHETYPE_DOCUMENT);
-        return (h(Host, { key: '231f5c3e282375b5850291611645fe3c904831bb' }, h("div", { key: '314e39ec3aa1eabeb1a98f6e6d63fcf07e13ccec', class: "mrd-layout-section" }, docArchetype
+        return (h(Host, { key: '5d778188356a25ea13d45745dc5ed573ab2b2ef0' }, h("div", { key: '0b673a4bcf8b36cd21662bb8a3506cc3f30edb04', class: "mrd-layout-section" }, docArchetype
             ? this.renderDocumentObject(docArchetype)
             : this.items.map(item => this.renderItem(item))), this.renderImageModal()));
     }
@@ -459,7 +345,7 @@ export class MrdLayoutSection {
                     "references": {
                         "ClientLayoutItem": {
                             "location": "import",
-                            "path": "../../types/client-layout",
+                            "path": "../../../types/client-layout",
                             "id": "src/types/client-layout.ts::ClientLayoutItem",
                             "referenceLocation": "ClientLayoutItem"
                         }
@@ -511,7 +397,7 @@ export class MrdLayoutSection {
                         },
                         "ClientViewMetadata": {
                             "location": "import",
-                            "path": "../../types/client-layout",
+                            "path": "../../../types/client-layout",
                             "id": "src/types/client-layout.ts::ClientViewMetadata",
                             "referenceLocation": "ClientViewMetadata"
                         }
@@ -579,7 +465,7 @@ export class MrdLayoutSection {
                     "references": {
                         "ClientArchetype": {
                             "location": "import",
-                            "path": "../../types/client-layout",
+                            "path": "../../../types/client-layout",
                             "id": "src/types/client-layout.ts::ClientArchetype",
                             "referenceLocation": "ClientArchetype"
                         }
@@ -623,7 +509,7 @@ export class MrdLayoutSection {
                     "references": {
                         "ClientLayoutItemNavigate": {
                             "location": "import",
-                            "path": "../../types/client-layout",
+                            "path": "../../../types/client-layout",
                             "id": "src/types/client-layout.ts::ClientLayoutItemNavigate",
                             "referenceLocation": "ClientLayoutItemNavigate"
                         }
@@ -817,7 +703,7 @@ export class MrdLayoutSection {
                         },
                         "RelationSearchResult": {
                             "location": "import",
-                            "path": "../../types/client-layout",
+                            "path": "../../../types/client-layout",
                             "id": "src/types/client-layout.ts::RelationSearchResult",
                             "referenceLocation": "RelationSearchResult"
                         }
@@ -861,6 +747,14 @@ export class MrdLayoutSection {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
+                        },
+                        "HTMLMrdDocumentListElement": {
+                            "location": "global",
+                            "id": "global::HTMLMrdDocumentListElement"
+                        },
+                        "HTMLMrdTableElement": {
+                            "location": "global",
+                            "id": "global::HTMLMrdTableElement"
                         }
                     },
                     "return": "Promise<void>"
@@ -886,6 +780,10 @@ export class MrdLayoutSection {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
+                        },
+                        "HTMLMrdTableElement": {
+                            "location": "global",
+                            "id": "global::HTMLMrdTableElement"
                         }
                     },
                     "return": "Promise<void>"
@@ -918,9 +816,13 @@ export class MrdLayoutSection {
                         },
                         "DistinctValue": {
                             "location": "import",
-                            "path": "../mrd-document-list/mrd-document-list",
-                            "id": "src/components/mrd-document-list/mrd-document-list.tsx::DistinctValue",
+                            "path": "../../documents/mrd-document-list/folder-tree",
+                            "id": "src/components/documents/mrd-document-list/folder-tree.ts::DistinctValue",
                             "referenceLocation": "DistinctValue"
+                        },
+                        "HTMLMrdDocumentListElement": {
+                            "location": "global",
+                            "id": "global::HTMLMrdDocumentListElement"
                         }
                     },
                     "return": "Promise<void>"
@@ -946,6 +848,10 @@ export class MrdLayoutSection {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
+                        },
+                        "HTMLMrdDocumentListElement": {
+                            "location": "global",
+                            "id": "global::HTMLMrdDocumentListElement"
                         }
                     },
                     "return": "Promise<void>"
@@ -971,6 +877,10 @@ export class MrdLayoutSection {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
+                        },
+                        "HTMLMrdDocumentListElement": {
+                            "location": "global",
+                            "id": "global::HTMLMrdDocumentListElement"
                         }
                     },
                     "return": "Promise<void>"

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

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 :host {
   display: block;
   width: 100%;
@@ -145,21 +146,19 @@
   height: 0.75rem;
   width: 55%;
   border-radius: var(--mrd-border-radius-sm);
-  background: linear-gradient(
-    90deg,
-    var(--mrd-color-neutral-200) 25%,
-    var(--mrd-color-neutral-100) 50%,
-    var(--mrd-color-neutral-200) 75%
-  );
+  background: linear-gradient(90deg, var(--mrd-color-neutral-200) 25%, var(--mrd-color-neutral-100) 50%, var(--mrd-color-neutral-200) 75%);
   background-size: 200% 100%;
   animation: mrd-shimmer 1.4s ease infinite;
 }
 
 @keyframes mrd-shimmer {
-  0%   { background-position: 200% 0; }
-  100% { background-position: -200% 0; }
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
 }
-
 /* ── Toolbar ───────────────────────────────────────────────────────────── */
 .mrd-table__toolbar {
   display: flex;
@@ -420,7 +419,7 @@
   background: var(--mrd-color-white);
   border: 1px solid var(--mrd-border-color);
   border-radius: var(--mrd-border-radius);
-  box-shadow: var(--mrd-shadow-md, 0 4px 12px rgba(0,0,0,.12));
+  box-shadow: var(--mrd-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.12));
   z-index: var(--mrd-z-dropdown, 200);
   font-size: var(--mrd-font-size-sm);
 }
@@ -523,7 +522,7 @@
 .mrd-table__filter-input:focus {
   outline: none;
   border-color: var(--mrd-color-primary);
-  box-shadow: 0 0 0 2px rgba(0,0,0,.06);
+  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.06);
 }
 
 .mrd-table__filter-range {
@@ -805,5 +804,4 @@
   line-height: 1.6;
   background: none;
   border: none;
-}
-
+}