@mmlogic/components 0.5.1 → 0.5.3

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

@@ -0,0 +1,44 @@
+import { h } from "@stencil/core";
+import { CellRenderer } from "../../../utils/cell-renderer";
+import { t } from "../../../utils/i18n";
+import { formatDate } from "../../../utils/format";
+import { candidateLabel } from "./merge-diff";
+/** History-enabled fields carry `{ current, history: [...] }` — this is the legal record itself (e.g. past company names), not an audit log. */
+function getHistory(item, record) {
+    var _a, _b;
+    if (!item.historyEnabled || !item.name)
+        return [];
+    return (_b = (_a = record === null || record === void 0 ? void 0 : record[item.name]) === null || _a === void 0 ? void 0 : _a.history) !== null && _b !== void 0 ? _b : [];
+}
+/** Small clock badge + popover listing past values for a history-enabled field — same UX as mrd-layout-section's field view. */
+const HistoryBadge = ({ locale, history, isOpen, onToggle }) => {
+    if (history.length === 0)
+        return null;
+    const sorted = [...history].sort((a, b) => b.until.localeCompare(a.until));
+    return (h("span", { class: "mrd-merge-view__history-wrap" }, h("button", { type: "button", class: "mrd-merge-view__history-btn", title: t('history_badge_tooltip', locale), "aria-label": t('history_badge_tooltip', locale), onClick: (e) => { e.stopPropagation(); onToggle(); } }, h("svg", { class: "mrd-merge-view__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-merge-view__history-popover", role: "listbox" }, sorted.map((entry, i) => (h("div", { key: String(i), class: "mrd-merge-view__history-entry" }, entry.value, " (", t('history_until', locale), " ", formatDate(entry.until, locale), ")")))))));
+};
+export const MergeSearchStep = ({ locale, searchQuery, searchResults, isLoading, onSearchInput, onSelect }) => (h("div", { class: "mrd-merge-view__search-step" }, h("p", { class: "mrd-merge-view__hint" }, t('merge_search_hint', locale)), h("div", { class: "mrd-merge-view__search-wrapper" }, h("input", { class: "mrd-merge-view__search", type: "text", value: searchQuery, placeholder: t('search_placeholder', locale), onInput: (e) => onSearchInput(e.target.value) }), isLoading && h("span", { class: "mrd-merge-view__spinner", "aria-label": t('loading', locale) })), searchQuery.trim().length >= 2 && !isLoading && (h("div", { class: "mrd-merge-view__results" }, searchResults.length === 0 ? (h("div", { class: "mrd-merge-view__no-results" }, t('no_results', locale))) : (searchResults.map(record => {
+    var _a, _b, _c;
+    return (h("div", { key: (_c = (_b = (_a = record === null || record === void 0 ? void 0 : record._links) === null || _a === void 0 ? void 0 : _a.self) === null || _b === void 0 ? void 0 : _b.href) !== null && _c !== void 0 ? _c : candidateLabel(record), class: "mrd-merge-view__result-item" }, h("span", { class: "mrd-merge-view__result-label" }, candidateLabel(record)), h("button", { type: "button", class: "mrd-merge-view__btn mrd-merge-view__btn--secondary", onClick: () => onSelect(record) }, t('merge_select', locale))));
+}))))));
+export const MergeCompareStep = ({ locale, currentLabel, candidateLabel: bLabel, conflicts, autoFilled, recordA, recordB, resolutions, openHistoryKey, onResolve, onToggleHistory, onChangeCandidate, onContinue }) => (h("div", { class: "mrd-merge-view__compare-step" }, h("h3", { class: "mrd-merge-view__heading" }, t('merge_compare_heading', locale)), conflicts.length === 0 ? (h("p", { class: "mrd-merge-view__no-conflicts" }, t('merge_no_conflicts', locale))) : (h("table", { class: "mrd-merge-view__table" }, h("thead", null, h("tr", null, h("th", { class: "mrd-merge-view__header" }), h("th", { class: "mrd-merge-view__header" }, t('merge_column_a', locale), h("span", { class: "mrd-merge-view__header-name" }, currentLabel)), h("th", { class: "mrd-merge-view__header" }, t('merge_column_b', locale), h("span", { class: "mrd-merge-view__header-name" }, bLabel)))), h("tbody", null, conflicts.map(({ item }) => {
+    var _a, _b, _c;
+    const name = (_a = item.name) !== null && _a !== void 0 ? _a : '';
+    const resolution = (_b = resolutions[name]) !== null && _b !== void 0 ? _b : 'A';
+    const historyA = getHistory(item, recordA);
+    const historyB = getHistory(item, recordB);
+    const keyA = `${name}:A`;
+    const keyB = `${name}:B`;
+    return (h("tr", { key: name, class: "mrd-merge-view__row" }, h("td", { class: "mrd-merge-view__cell mrd-merge-view__cell--label" }, (_c = item.label) !== null && _c !== void 0 ? _c : name), h("td", { class: "mrd-merge-view__cell" }, h("label", { class: "mrd-merge-view__option" }, h("input", { type: "radio", name: `merge-${name}`, checked: resolution === 'A', onChange: () => onResolve(name, 'A') }), h("span", null, CellRenderer.render(item, recordA, locale) || '—')), h(HistoryBadge, { locale: locale, history: historyA, isOpen: openHistoryKey === keyA, onToggle: () => onToggleHistory(openHistoryKey === keyA ? null : keyA) })), h("td", { class: "mrd-merge-view__cell" }, h("label", { class: "mrd-merge-view__option" }, h("input", { type: "radio", name: `merge-${name}`, checked: resolution === 'B', onChange: () => onResolve(name, 'B') }), h("span", null, CellRenderer.render(item, recordB, locale) || '—')), h(HistoryBadge, { locale: locale, history: historyB, isOpen: openHistoryKey === keyB, onToggle: () => onToggleHistory(openHistoryKey === keyB ? null : keyB) }))));
+})))), autoFilled.length > 0 && (h("div", { class: "mrd-merge-view__auto-note" }, h("p", null, t('merge_auto_heading', locale)), h("ul", null, autoFilled.map(({ item }) => { var _a; return h("li", { key: item.name }, (_a = item.label) !== null && _a !== void 0 ? _a : item.name); })))), h("div", { class: "mrd-merge-view__actions" }, h("button", { type: "button", class: "mrd-merge-view__btn mrd-merge-view__btn--secondary", onClick: onChangeCandidate }, t('merge_back', locale)), h("button", { type: "button", class: "mrd-merge-view__btn mrd-merge-view__btn--primary", onClick: onContinue }, t('merge_continue', locale)))));
+export const MergeConfirmStep = ({ locale, candidateLabel: bLabel, conflicts, autoFilled, resolutions, recordB, openHistoryKey, onToggleHistory, onBack, onConfirm }) => {
+    const changed = [
+        ...autoFilled,
+        ...conflicts.filter(({ item }) => { var _a; return resolutions[(_a = item.name) !== null && _a !== void 0 ? _a : ''] === 'B'; }),
+    ];
+    return (h("div", { class: "mrd-merge-view__confirm-step" }, h("h3", { class: "mrd-merge-view__heading" }, t('merge_confirm_heading', locale)), changed.length === 0 ? (h("p", { class: "mrd-merge-view__no-conflicts" }, t('merge_no_conflicts', locale))) : (h("ul", { class: "mrd-merge-view__summary-list" }, changed.map(({ item }) => {
+        var _a;
+        const key = `${item.name}:confirm`;
+        return (h("li", { key: item.name }, (_a = item.label) !== null && _a !== void 0 ? _a : item.name, ": ", CellRenderer.render(item, recordB, locale) || '—', h(HistoryBadge, { locale: locale, history: getHistory(item, recordB), isOpen: openHistoryKey === key, onToggle: () => onToggleHistory(openHistoryKey === key ? null : key) })));
+    }))), h("p", { class: "mrd-merge-view__warning" }, t('merge_confirm_warning', locale), " (", bLabel, ")"), h("div", { class: "mrd-merge-view__actions" }, h("button", { type: "button", class: "mrd-merge-view__btn mrd-merge-view__btn--secondary", onClick: onBack }, t('merge_back', locale)), h("button", { type: "button", class: "mrd-merge-view__btn mrd-merge-view__btn--danger", onClick: onConfirm }, t('merge_confirm_button', locale)))));
+};

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);
+  }
+}