@mmlogic/components 0.5.1 → 0.5.2

package/dist/collection/components/merge/mrd-merge-view/mrd-merge-view.css

@@ -0,0 +1,244 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+.mrd-merge-view {
+  font-family: var(--mrd-font-family);
+  font-size: var(--mrd-font-size-sm);
+  color: var(--mrd-color-neutral-900);
+}
+.mrd-merge-view__hint {
+  margin: 0 0 var(--mrd-space-4);
+  color: var(--mrd-color-neutral-600);
+}
+.mrd-merge-view__heading {
+  margin: 0 0 var(--mrd-space-4);
+  font-size: var(--mrd-font-size-lg);
+  font-weight: var(--mrd-font-weight-semibold);
+}
+.mrd-merge-view__search-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+.mrd-merge-view__search {
+  width: 100%;
+  height: var(--mrd-input-height);
+  padding: var(--mrd-input-padding-y) var(--mrd-input-padding-x);
+  border: var(--mrd-border-width) solid var(--mrd-border-color);
+  border-radius: var(--mrd-border-radius);
+  background: var(--mrd-input-bg);
+  color: var(--mrd-input-color);
+  font-size: var(--mrd-font-size-sm);
+}
+.mrd-merge-view__search:focus {
+  outline: none;
+  border-color: var(--mrd-border-color-focus);
+  box-shadow: var(--mrd-shadow-focus);
+}
+.mrd-merge-view__spinner {
+  position: absolute;
+  right: var(--mrd-space-3);
+  width: 1rem;
+  height: 1rem;
+  border: 2px solid var(--mrd-color-neutral-300);
+  border-top-color: var(--mrd-color-primary);
+  border-radius: var(--mrd-border-radius-full);
+  animation: mrd-merge-view-spin var(--mrd-transition-slow) linear infinite;
+}
+.mrd-merge-view__results {
+  margin-top: var(--mrd-space-2);
+  border: var(--mrd-border-width) solid var(--mrd-border-color);
+  border-radius: var(--mrd-border-radius);
+  overflow: hidden;
+}
+.mrd-merge-view__no-results {
+  padding: var(--mrd-space-3) var(--mrd-space-4);
+  color: var(--mrd-color-neutral-500);
+}
+.mrd-merge-view__result-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--mrd-space-3);
+  padding: var(--mrd-space-2) var(--mrd-space-4);
+}
+.mrd-merge-view__result-item:not(:last-child) {
+  border-bottom: var(--mrd-border-width) solid var(--mrd-border-color);
+}
+.mrd-merge-view__result-label {
+  font-weight: var(--mrd-font-weight-medium);
+}
+.mrd-merge-view__no-conflicts {
+  color: var(--mrd-color-neutral-600);
+}
+.mrd-merge-view__table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: var(--mrd-space-4);
+}
+.mrd-merge-view__header {
+  text-align: left;
+  padding: var(--mrd-space-2) var(--mrd-space-3);
+  border-bottom: 2px solid var(--mrd-border-color);
+  font-size: var(--mrd-font-size-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--mrd-color-neutral-600);
+}
+.mrd-merge-view__header-name {
+  display: block;
+  text-transform: none;
+  letter-spacing: normal;
+  font-size: var(--mrd-font-size-sm);
+  font-weight: var(--mrd-font-weight-medium);
+  color: var(--mrd-color-neutral-900);
+  margin-top: var(--mrd-space-1);
+}
+.mrd-merge-view__row:nth-child(even) {
+  background: var(--mrd-color-neutral-50);
+}
+.mrd-merge-view__cell {
+  padding: var(--mrd-space-2) var(--mrd-space-3);
+  border-bottom: var(--mrd-border-width) solid var(--mrd-border-color);
+  vertical-align: top;
+}
+.mrd-merge-view__cell--label {
+  font-weight: var(--mrd-font-weight-medium);
+  white-space: nowrap;
+}
+.mrd-merge-view__option {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--mrd-space-2);
+  cursor: pointer;
+}
+.mrd-merge-view__option input[type=radio] {
+  margin-top: 0.2em;
+}
+.mrd-merge-view__history-wrap {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  margin-left: var(--mrd-space-1);
+}
+.mrd-merge-view__history-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: var(--mrd-border-radius-sm);
+  color: var(--mrd-color-neutral-400);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: color var(--mrd-transition-fast), background-color var(--mrd-transition-fast);
+}
+.mrd-merge-view__history-btn:hover {
+  color: var(--mrd-color-neutral-700);
+  background-color: var(--mrd-color-neutral-100);
+}
+.mrd-merge-view__history-btn:focus {
+  outline: none;
+  box-shadow: var(--mrd-shadow-focus);
+}
+.mrd-merge-view__history-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+.mrd-merge-view__history-popover {
+  position: absolute;
+  top: calc(100% + 0.25rem);
+  left: 0;
+  min-width: 18rem;
+  max-width: 18rem;
+  background-color: var(--mrd-color-white);
+  border: var(--mrd-border-width) solid var(--mrd-border-color);
+  border-radius: var(--mrd-border-radius-md);
+  box-shadow: var(--mrd-shadow-md);
+  padding: var(--mrd-space-1) 0;
+  z-index: var(--mrd-z-dropdown);
+}
+.mrd-merge-view__history-entry {
+  font-size: var(--mrd-font-size-sm);
+  color: var(--mrd-color-neutral-700);
+  padding: var(--mrd-space-2) var(--mrd-space-3);
+  line-height: var(--mrd-line-height-normal);
+}
+.mrd-merge-view__history-entry:not(:last-child) {
+  border-bottom: var(--mrd-border-width) solid var(--mrd-color-neutral-100);
+}
+.mrd-merge-view__auto-note {
+  margin-bottom: var(--mrd-space-4);
+  padding: var(--mrd-space-3) var(--mrd-space-4);
+  background: var(--mrd-color-neutral-50);
+  border: var(--mrd-border-width) solid var(--mrd-border-color);
+  border-radius: var(--mrd-border-radius);
+  color: var(--mrd-color-neutral-700);
+}
+.mrd-merge-view__auto-note p {
+  margin: 0 0 var(--mrd-space-1);
+  font-weight: var(--mrd-font-weight-medium);
+}
+.mrd-merge-view__auto-note ul {
+  margin: 0;
+  padding-left: var(--mrd-space-5);
+}
+.mrd-merge-view__summary-list {
+  margin: 0 0 var(--mrd-space-4);
+  padding-left: var(--mrd-space-5);
+}
+.mrd-merge-view__warning {
+  padding: var(--mrd-space-3) var(--mrd-space-4);
+  background: var(--mrd-color-danger-light);
+  border: var(--mrd-border-width) solid var(--mrd-color-danger);
+  border-radius: var(--mrd-border-radius);
+  color: var(--mrd-color-danger-dark);
+  margin-bottom: var(--mrd-space-4);
+}
+.mrd-merge-view__actions {
+  display: flex;
+  gap: var(--mrd-space-3);
+}
+.mrd-merge-view__btn {
+  height: var(--mrd-input-height-sm);
+  padding: 0 var(--mrd-space-4);
+  border-radius: var(--mrd-border-radius);
+  border: var(--mrd-border-width) solid transparent;
+  font-size: var(--mrd-font-size-sm);
+  font-weight: var(--mrd-font-weight-medium);
+  cursor: pointer;
+  transition: background-color var(--mrd-transition-fast), border-color var(--mrd-transition-fast);
+}
+.mrd-merge-view__btn--primary {
+  background: var(--mrd-color-primary);
+  color: var(--mrd-color-white);
+}
+.mrd-merge-view__btn--primary:hover {
+  background: var(--mrd-color-primary-hover);
+}
+.mrd-merge-view__btn--secondary {
+  background: var(--mrd-color-white);
+  border-color: var(--mrd-border-color);
+  color: var(--mrd-color-neutral-700);
+}
+.mrd-merge-view__btn--secondary:hover {
+  background: var(--mrd-color-neutral-50);
+}
+.mrd-merge-view__btn--danger {
+  background: var(--mrd-color-danger);
+  color: var(--mrd-color-white);
+}
+.mrd-merge-view__btn--danger:hover {
+  background: var(--mrd-color-danger-dark);
+}
+
+@keyframes mrd-merge-view-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/dist/collection/components/merge/mrd-merge-view/mrd-merge-view.js

@@ -0,0 +1,397 @@
+import { Host, h } from "@stencil/core";
+import { diffFields, buildPatch, candidateLabel } from "./merge-diff";
+import { MergeSearchStep, MergeCompareStep, MergeConfirmStep } from "./merge-parts";
+/**
+ * Merges two DataObjects of the same basic type (FINDING-0114 / TASK-0177).
+ * Never performs network I/O itself: it emits `mrdSearch` (host searches and
+ * calls `setSearchResults()`, mirroring mrd-relation-field) and `mrdMerge`
+ * (host calls the merge endpoint — `POST {winnerHref}/merge` with
+ * `{ loser: loserHref, patch }`, per DataController.merge()).
+ *
+ * Has no exit/cancel affordance of its own — hosts show this inside their
+ * own overlay-page chrome (its close button), the same way mrd-layout-section
+ * never renders a page-level close button either.
+ */
+export class MrdMergeView {
+    constructor() {
+        this.locale = navigator.language;
+        /** Dot-notation class, passed through on mrdSearch (host may use it to pick the right search endpoint). */
+        this.basicType = '';
+        /** URL segment for the search endpoint; falls back to basicType when absent. */
+        this.mostSignificantClass = '';
+        /** Flat FIELD/RELATION items describing the basic type's schema (host flattens SECTION/GROUP, same as mrd-table's `columns`). */
+        this.fields = [];
+        /** Href of A (winner) — the object the merge screen was opened from. */
+        this.currentHref = '';
+        /** A's full raw record: flat fields + `_links`, the same row shape CellRenderer.render expects. */
+        this.currentRecord = {};
+        /** Display name for A, shown in the compare step's column header. */
+        this.currentLabel = '';
+        this.step = 'search';
+        this.searchQuery = '';
+        this.searchResults = [];
+        this.isLoading = false;
+        this.candidate = null;
+        this.resolutions = {};
+        /** Which history badge popover is open, keyed e.g. `legalName:A` / `legalName:confirm`. */
+        this.openHistoryKey = null;
+        this.historyClickOutside = null;
+        this.searchDebounce = null;
+        this.handleSearchInput = (query) => {
+            this.searchQuery = query;
+            if (this.searchDebounce)
+                clearTimeout(this.searchDebounce);
+            if (query.trim().length >= 2) {
+                this.isLoading = true;
+                this.searchDebounce = setTimeout(() => {
+                    this.mrdSearch.emit({
+                        query,
+                        basicType: this.basicType,
+                        mostSignificantClass: this.mostSignificantClass || undefined,
+                    });
+                }, 300);
+            }
+            else {
+                this.searchResults = [];
+                this.isLoading = false;
+            }
+        };
+        this.handleSelect = (record) => {
+            this.candidate = record;
+            const { conflicts } = diffFields(this.fields, this.currentRecord, record);
+            const resolutions = {};
+            conflicts.forEach(({ item }) => { var _a; resolutions[(_a = item.name) !== null && _a !== void 0 ? _a : ''] = 'A'; });
+            this.resolutions = resolutions;
+            this.openHistoryKey = null;
+            this.step = 'compare';
+        };
+        this.handleChangeCandidate = () => {
+            this.candidate = null;
+            this.resolutions = {};
+            this.openHistoryKey = null;
+            this.step = 'search';
+        };
+        this.handleResolve = (name, side) => {
+            this.resolutions = Object.assign(Object.assign({}, this.resolutions), { [name]: side });
+        };
+        this.handleToggleHistory = (key) => {
+            this.openHistoryKey = key;
+        };
+        this.handleContinue = () => {
+            this.step = 'confirm';
+        };
+        this.handleBack = () => {
+            this.step = 'compare';
+        };
+        this.handleConfirm = () => {
+            var _a, _b, _c, _d;
+            if (!this.candidate)
+                return;
+            const diff = diffFields(this.fields, this.currentRecord, this.candidate);
+            const patch = buildPatch(diff, this.resolutions);
+            const loserHref = (_d = (_c = (_b = (_a = this.candidate) === null || _a === void 0 ? void 0 : _a._links) === null || _b === void 0 ? void 0 : _b.self) === null || _c === void 0 ? void 0 : _c.href) !== null && _d !== void 0 ? _d : '';
+            this.mrdMerge.emit({ winnerHref: this.currentHref, loserHref, patch });
+        };
+    }
+    connectedCallback() {
+        this.historyClickOutside = (e) => {
+            if (!this.el.contains(e.target))
+                this.openHistoryKey = null;
+        };
+        document.addEventListener('mousedown', this.historyClickOutside);
+    }
+    disconnectedCallback() {
+        if (this.historyClickOutside) {
+            document.removeEventListener('mousedown', this.historyClickOutside);
+            this.historyClickOutside = null;
+        }
+    }
+    /**
+     * Stores search results, filtering out A itself regardless of what the
+     * host's search returns — A must never appear as a mergeable candidate.
+     */
+    async setSearchResults(records) {
+        this.searchResults = (records !== null && records !== void 0 ? records : []).filter(r => { var _a, _b, _c; return ((_c = (_b = (_a = r === null || r === void 0 ? void 0 : r._links) === null || _a === void 0 ? void 0 : _a.self) === null || _b === void 0 ? void 0 : _b.href) !== null && _c !== void 0 ? _c : null) !== this.currentHref; });
+        this.isLoading = false;
+    }
+    async setLoading(loading) {
+        this.isLoading = loading;
+    }
+    render() {
+        var _a, _b;
+        let stepContent;
+        if (this.step === 'search') {
+            stepContent = (h(MergeSearchStep, { key: '4b79504f62f85274c9cd9681b6819c2318f4246a', locale: this.locale, searchQuery: this.searchQuery, searchResults: this.searchResults, isLoading: this.isLoading, onSearchInput: this.handleSearchInput, onSelect: this.handleSelect }));
+        }
+        else {
+            const diff = diffFields(this.fields, this.currentRecord, this.candidate);
+            const bLabel = candidateLabel(this.candidate);
+            stepContent = this.step === 'compare' ? (h(MergeCompareStep, { locale: this.locale, currentLabel: this.currentLabel, candidateLabel: bLabel, conflicts: diff.conflicts, autoFilled: diff.autoFilled, recordA: this.currentRecord, recordB: (_a = this.candidate) !== null && _a !== void 0 ? _a : {}, resolutions: this.resolutions, openHistoryKey: this.openHistoryKey, onResolve: this.handleResolve, onToggleHistory: this.handleToggleHistory, onChangeCandidate: this.handleChangeCandidate, onContinue: this.handleContinue })) : (h(MergeConfirmStep, { locale: this.locale, candidateLabel: bLabel, conflicts: diff.conflicts, autoFilled: diff.autoFilled, resolutions: this.resolutions, recordB: (_b = this.candidate) !== null && _b !== void 0 ? _b : {}, openHistoryKey: this.openHistoryKey, onToggleHistory: this.handleToggleHistory, onBack: this.handleBack, onConfirm: this.handleConfirm }));
+        }
+        return (h(Host, { key: 'f3fc046fa728646e2ff686d2eae30024da3121e1' }, h("div", { key: '55bef786973d22dce49be021cfb78588b119139c', class: "mrd-merge-view" }, stepContent)));
+    }
+    static get is() { return "mrd-merge-view"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["mrd-merge-view.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["mrd-merge-view.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "locale",
+                "defaultValue": "navigator.language"
+            },
+            "basicType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Dot-notation class, passed through on mrdSearch (host may use it to pick the right search endpoint)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "basic-type",
+                "defaultValue": "''"
+            },
+            "mostSignificantClass": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "URL segment for the search endpoint; falls back to basicType when absent."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "most-significant-class",
+                "defaultValue": "''"
+            },
+            "fields": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ClientLayoutItem[]",
+                    "resolved": "ClientLayoutItem[]",
+                    "references": {
+                        "ClientLayoutItem": {
+                            "location": "import",
+                            "path": "../../../types/client-layout",
+                            "id": "src/types/client-layout.ts::ClientLayoutItem",
+                            "referenceLocation": "ClientLayoutItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Flat FIELD/RELATION items describing the basic type's schema (host flattens SECTION/GROUP, same as mrd-table's `columns`)."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "currentHref": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Href of A (winner) \u2014 the object the merge screen was opened from."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "current-href",
+                "defaultValue": "''"
+            },
+            "currentRecord": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Record<string, any>",
+                    "resolved": "any | string",
+                    "references": {
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A's full raw record: flat fields + `_links`, the same row shape CellRenderer.render expects."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{}"
+            },
+            "currentLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Display name for A, shown in the compare step's column header."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "current-label",
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "step": {},
+            "searchQuery": {},
+            "searchResults": {},
+            "isLoading": {},
+            "candidate": {},
+            "resolutions": {},
+            "openHistoryKey": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "mrdSearch",
+                "name": "mrdSearch",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ query: string; basicType: string; mostSignificantClass?: string }",
+                    "resolved": "{ query: string; basicType: string; mostSignificantClass?: string | undefined; }",
+                    "references": {}
+                }
+            }, {
+                "method": "mrdMerge",
+                "name": "mrdMerge",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ winnerHref: string; loserHref: string; patch: Record<string, unknown> }",
+                    "resolved": "{ winnerHref: string; loserHref: string; patch: Record<string, unknown>; }",
+                    "references": {
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setSearchResults": {
+                "complexType": {
+                    "signature": "(records: Record<string, any>[]) => Promise<void>",
+                    "parameters": [{
+                            "name": "records",
+                            "type": "Record<string, any>[]",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Stores search results, filtering out A itself regardless of what the\nhost's search returns \u2014 A must never appear as a mergeable candidate.",
+                    "tags": []
+                }
+            },
+            "setLoading": {
+                "complexType": {
+                    "signature": "(loading: boolean) => Promise<void>",
+                    "parameters": [{
+                            "name": "loading",
+                            "type": "boolean",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/dev/api.js

@@ -135,6 +135,30 @@ async function apiSearchRelation(token, tenantCode, mostSignificantClass, query)
   }));
 }
 
+/**
+ * Search for merge candidates. Unlike apiSearchRelation, this does NOT map
+ * results down to {id, label} — mrd-merge-view needs the full raw records
+ * (fields + _links) up front so it can diff without a second fetch per
+ * candidate once one is selected.
+ */
+async function apiSearchMergeCandidates(token, tenantCode, mostSignificantClass, query) {
+  const q = encodeURIComponent(query);
+  const { ok, status, body } = await apiRequest('GET', `/data/${tenantCode}/${mostSignificantClass}?q=${q}`, token);
+  if (!ok) throw new Error(`${status}: ${typeof body === 'string' ? body : JSON.stringify(body)}`);
+  return (body._embedded && body._embedded[mostSignificantClass]) || [];
+}
+
+/**
+ * Merge two DataObjects of the same basic type. Mirrors DataController.merge():
+ * POST {winnerHref}/merge with { loser: loserHref, patch }. Returns the
+ * patched winner record on success.
+ */
+async function apiMerge(token, winnerHref, loserHref, patch) {
+  const { ok, status, body } = await apiRequest('POST', `${winnerHref}/merge`, token, { loser: loserHref, patch });
+  if (!ok) throw new Error(`${status}: ${typeof body === 'string' ? body : JSON.stringify(body)}`);
+  return body;
+}
+
 /* =====================================================================
    LAYOUT MAPPERS
    mrd-form and mrd-field now accept the flat API format directly.