@memberjunction/ng-record-clone 0.0.1-seed.1 → 6.2.0-edge.2

package/dist/lib/clone-lineage-chip.component.js

@@ -0,0 +1,448 @@
+/**
+ * @fileoverview Compact lineage chip and history popover component.
+ *
+ * Implements §12.3 of the Record Cloning architectural blueprint. Surfaces origin
+ * and clone lineage metadata ("Cloned from <name>" or "<n> clones"). Clicking opens
+ * a popover listing ancestral origins and descendant clones with safe navigation links.
+ */
+import { Component, ChangeDetectionStrategy, Input, Output, EventEmitter, ChangeDetectorRef, ViewChild, inject, } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CompositeKey } from '@memberjunction/core';
+import { BaseAngularComponent } from '@memberjunction/ng-base-types';
+import { RecordCloneService } from './record-clone.service';
+import { CompositeKeyToRecordCloneKey } from './record-clone-types';
+import * as i0 from "@angular/core";
+const _c0 = ["chipTrigger"];
+const _c1 = ["closeButton"];
+const _forTrack0 = ($index, $item) => $item.CloneLogID;
+function CloneLineageChipComponent_Conditional_0_Conditional_6_Conditional_9_For_5_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+} if (rf & 2) {
+    const item_r5 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵtextInterpolate1(" \u2022 by ", item_r5.ClonedBy, " ");
+} }
+function CloneLineageChipComponent_Conditional_0_Conditional_6_Conditional_9_For_5_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "div", 16);
+    i0.ɵɵdomElement(1, "i", 17);
+    i0.ɵɵdomElementStart(2, "div", 18)(3, "button", 19);
+    i0.ɵɵdomListener("click", function CloneLineageChipComponent_Conditional_0_Conditional_6_Conditional_9_For_5_Template_button_click_3_listener() { const item_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnNavigate(item_r5)); });
+    i0.ɵɵtext(4);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(5, "span", 20);
+    i0.ɵɵtext(6);
+    i0.ɵɵconditionalCreate(7, CloneLineageChipComponent_Conditional_0_Conditional_6_Conditional_9_For_5_Conditional_7_Template, 1, 1);
+    i0.ɵɵdomElementEnd()()();
+} if (rf & 2) {
+    const item_r5 = ctx.$implicit;
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate1(" ", item_r5.DisplayName || item_r5.RecordID, " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", item_r5.EntityName, " ");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(item_r5.ClonedBy ? 7 : -1);
+} }
+function CloneLineageChipComponent_Conditional_0_Conditional_6_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 13)(1, "span", 14);
+    i0.ɵɵtext(2, "Ancestry Chain (Origins)");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(3, "div", 15);
+    i0.ɵɵrepeaterCreate(4, CloneLineageChipComponent_Conditional_0_Conditional_6_Conditional_9_For_5_Template, 8, 3, "div", 16, _forTrack0);
+    i0.ɵɵdomElementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(4);
+    i0.ɵɵrepeater(ctx_r1.Ancestors);
+} }
+function CloneLineageChipComponent_Conditional_0_Conditional_6_Conditional_10_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵtextInterpolate1(" \u2022 by ", ctx_r1.SourceRecord.ClonedBy, " ");
+} }
+function CloneLineageChipComponent_Conditional_0_Conditional_6_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "div", 13)(1, "span", 14);
+    i0.ɵɵtext(2, "Cloned From");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(3, "div", 16);
+    i0.ɵɵdomElement(4, "i", 17);
+    i0.ɵɵdomElementStart(5, "div", 18)(6, "button", 19);
+    i0.ɵɵdomListener("click", function CloneLineageChipComponent_Conditional_0_Conditional_6_Conditional_10_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnNavigate(ctx_r1.SourceRecord)); });
+    i0.ɵɵtext(7);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(8, "span", 20);
+    i0.ɵɵtext(9);
+    i0.ɵɵconditionalCreate(10, CloneLineageChipComponent_Conditional_0_Conditional_6_Conditional_10_Conditional_10_Template, 1, 1);
+    i0.ɵɵdomElementEnd()()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(7);
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.SourceRecord.DisplayName || ctx_r1.SourceRecord.RecordID, " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.SourceRecord.EntityName, " ");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.SourceRecord.ClonedBy ? 10 : -1);
+} }
+function CloneLineageChipComponent_Conditional_0_Conditional_6_Conditional_11_For_5_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+} if (rf & 2) {
+    const clone_r8 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵtextInterpolate1(" \u2022 by ", clone_r8.ClonedBy, " ");
+} }
+function CloneLineageChipComponent_Conditional_0_Conditional_6_Conditional_11_For_5_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "div", 16);
+    i0.ɵɵdomElement(1, "i", 21);
+    i0.ɵɵdomElementStart(2, "div", 18)(3, "button", 19);
+    i0.ɵɵdomListener("click", function CloneLineageChipComponent_Conditional_0_Conditional_6_Conditional_11_For_5_Template_button_click_3_listener() { const clone_r8 = i0.ɵɵrestoreView(_r7).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnNavigate(clone_r8)); });
+    i0.ɵɵtext(4);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(5, "span", 20);
+    i0.ɵɵtext(6);
+    i0.ɵɵconditionalCreate(7, CloneLineageChipComponent_Conditional_0_Conditional_6_Conditional_11_For_5_Conditional_7_Template, 1, 1);
+    i0.ɵɵdomElementEnd()()();
+} if (rf & 2) {
+    const clone_r8 = ctx.$implicit;
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate1(" ", clone_r8.DisplayName || clone_r8.RecordID, " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", clone_r8.EntityName, " ");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(clone_r8.ClonedBy ? 7 : -1);
+} }
+function CloneLineageChipComponent_Conditional_0_Conditional_6_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 13)(1, "span", 14);
+    i0.ɵɵtext(2);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(3, "div", 15);
+    i0.ɵɵrepeaterCreate(4, CloneLineageChipComponent_Conditional_0_Conditional_6_Conditional_11_For_5_Template, 8, 3, "div", 16, _forTrack0);
+    i0.ɵɵdomElementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" Clones Created from This Record (", ctx_r1.Clones.length, ") ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(ctx_r1.Clones);
+} }
+function CloneLineageChipComponent_Conditional_0_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "div", 6)(1, "div", 7)(2, "span", 8);
+    i0.ɵɵdomElement(3, "i", 9);
+    i0.ɵɵtext(4, " Record Clone Lineage ");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(5, "button", 10, 1);
+    i0.ɵɵdomListener("click", function CloneLineageChipComponent_Conditional_0_Conditional_6_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.ClosePopover(true)); });
+    i0.ɵɵdomElement(7, "i", 11);
+    i0.ɵɵdomElementEnd()();
+    i0.ɵɵdomElementStart(8, "div", 12);
+    i0.ɵɵconditionalCreate(9, CloneLineageChipComponent_Conditional_0_Conditional_6_Conditional_9_Template, 6, 0, "div", 13);
+    i0.ɵɵconditionalCreate(10, CloneLineageChipComponent_Conditional_0_Conditional_6_Conditional_10_Template, 11, 3, "div", 13);
+    i0.ɵɵconditionalCreate(11, CloneLineageChipComponent_Conditional_0_Conditional_6_Conditional_11_Template, 6, 1, "div", 13);
+    i0.ɵɵdomElementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵdomProperty("id", ctx_r1.PopoverId);
+    i0.ɵɵadvance(9);
+    i0.ɵɵconditional(ctx_r1.Ancestors && ctx_r1.Ancestors.length > 0 ? 9 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.SourceRecord && (!ctx_r1.Ancestors || ctx_r1.Ancestors.length === 0) ? 10 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.Clones && ctx_r1.Clones.length > 0 ? 11 : -1);
+} }
+function CloneLineageChipComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "div", 3);
+    i0.ɵɵdomListener("keydown.escape", function CloneLineageChipComponent_Conditional_0_Template_div_keydown_escape_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnEscape($event)); });
+    i0.ɵɵdomElementStart(1, "button", 4, 0);
+    i0.ɵɵdomListener("click", function CloneLineageChipComponent_Conditional_0_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.TogglePopover()); });
+    i0.ɵɵdomElement(3, "i");
+    i0.ɵɵdomElementStart(4, "span", 5);
+    i0.ɵɵtext(5);
+    i0.ɵɵdomElementEnd()();
+    i0.ɵɵconditionalCreate(6, CloneLineageChipComponent_Conditional_0_Conditional_6_Template, 12, 4, "div", 6);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("active", ctx_r1.IsOpen);
+    i0.ɵɵdomProperty("title", ctx_r1.ChipTooltip);
+    i0.ɵɵattribute("aria-expanded", ctx_r1.IsOpen)("aria-controls", ctx_r1.PopoverId);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassMap(ctx_r1.ChipIcon);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r1.ChipLabel);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.IsOpen ? 6 : -1);
+} }
+export class CloneLineageChipComponent extends BaseAngularComponent {
+    cloneService = inject(RecordCloneService);
+    cdr = inject(ChangeDetectorRef);
+    /** Entity of the record whose lineage to show. */
+    EntityName = '';
+    /** Key of the record: a RecordCloneKey or a record-id string (`CompositeKey.FromURLSegment` form). */
+    RecordKey = '';
+    /** Load lineage on init. Set false and call `LoadLineage()` to control timing. */
+    AutoLoad = true;
+    /** Pre-loaded lineage; skips the server call when set. */
+    LineageData = null;
+    /** Asks the host to open an ancestor or clone from the popover. */
+    NavigateToRecord = new EventEmitter();
+    IsOpen = false;
+    IsLoading = false;
+    get SourceRecord() {
+        if (!this.LineageData?.Ancestors || this.LineageData.Ancestors.length === 0)
+            return undefined;
+        return this.LineageData.Ancestors[this.LineageData.Ancestors.length - 1];
+    }
+    get Ancestors() {
+        return this.LineageData?.Ancestors;
+    }
+    get Clones() {
+        return this.LineageData?.Clones;
+    }
+    get HasLineage() {
+        return !!this.SourceRecord || (!!this.Clones && this.Clones.length > 0);
+    }
+    get ChipIcon() {
+        if (this.SourceRecord) {
+            return 'fa-solid fa-code-branch';
+        }
+        return 'fa-solid fa-clone';
+    }
+    get ChipLabel() {
+        if (this.SourceRecord) {
+            return `Cloned from ${this.SourceRecord.DisplayName || this.SourceRecord.RecordID}`;
+        }
+        if (this.Clones && this.Clones.length > 0) {
+            return `${this.Clones.length} clone${this.Clones.length === 1 ? '' : 's'}`;
+        }
+        return 'Lineage';
+    }
+    get ChipTooltip() {
+        if (this.SourceRecord) {
+            return `View clone origin and lineage history`;
+        }
+        return `View records cloned from this record`;
+    }
+    async ngOnInit() {
+        if (this.AutoLoad && !this.LineageData && this.EntityName && this.RecordKey) {
+            await this.LoadLineage();
+        }
+    }
+    async LoadLineage() {
+        this.IsLoading = true;
+        this.cdr.markForCheck();
+        try {
+            const key = typeof this.RecordKey === 'string'
+                ? CompositeKeyToRecordCloneKey(CompositeKey.FromURLSegment(this.ProviderToUse?.EntityByName(this.EntityName), this.RecordKey))
+                : this.RecordKey;
+            this.LineageData = await this.cloneService.GetLineage({
+                EntityName: this.EntityName,
+                Key: key,
+                Direction: 'both',
+            }, this.ProviderToUse);
+        }
+        catch {
+            this.LineageData = null;
+        }
+        finally {
+            this.IsLoading = false;
+            this.cdr.markForCheck();
+        }
+    }
+    static nextId = 0;
+    /** Ties the chip's aria-controls to its popover. */
+    PopoverId = `mj-clone-lineage-${++CloneLineageChipComponent.nextId}`;
+    chipTrigger;
+    closeButton;
+    TogglePopover() {
+        this.IsOpen = !this.IsOpen;
+        this.cdr.detectChanges();
+        // Move focus into the panel on open, so keyboard users land in it.
+        if (this.IsOpen)
+            this.closeButton?.nativeElement.focus();
+    }
+    /** Closes the popover; `returnFocus` puts focus back on the chip (Escape, the close button). */
+    ClosePopover(returnFocus = false) {
+        this.IsOpen = false;
+        this.cdr.markForCheck();
+        if (returnFocus)
+            this.chipTrigger?.nativeElement.focus();
+    }
+    OnEscape(event) {
+        if (!this.IsOpen)
+            return;
+        event.stopPropagation();
+        this.ClosePopover(true);
+    }
+    OnNavigate(item) {
+        // Back to the chip: the host may open the record in another tab, leaving this page as it was.
+        this.ClosePopover(true);
+        this.NavigateToRecord.emit({
+            Kind: 'record',
+            EntityName: item.EntityName,
+            RecordKey: item.RecordID,
+        });
+    }
+    static ɵfac = /*@__PURE__*/ (() => { let ɵCloneLineageChipComponent_BaseFactory; return function CloneLineageChipComponent_Factory(__ngFactoryType__) { return (ɵCloneLineageChipComponent_BaseFactory || (ɵCloneLineageChipComponent_BaseFactory = i0.ɵɵgetInheritedFactory(CloneLineageChipComponent)))(__ngFactoryType__ || CloneLineageChipComponent); }; })();
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CloneLineageChipComponent, selectors: [["mj-clone-lineage-chip"]], viewQuery: function CloneLineageChipComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0, 5)(_c1, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.chipTrigger = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.closeButton = _t.first);
+        } }, inputs: { EntityName: "EntityName", RecordKey: "RecordKey", AutoLoad: "AutoLoad", LineageData: "LineageData" }, outputs: { NavigateToRecord: "NavigateToRecord" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 1, vars: 1, consts: [["chipTrigger", ""], ["closeButton", ""], [1, "lineage-wrapper"], [1, "lineage-wrapper", 3, "keydown.escape"], ["type", "button", 1, "lineage-chip-btn", 3, "click", "title"], [1, "chip-label"], ["role", "region", "aria-label", "Record lineage", 1, "lineage-popover", 3, "id"], [1, "popover-header"], [1, "popover-title"], [1, "fa-solid", "fa-code-fork"], ["type", "button", "aria-label", "Close lineage", "title", "Close", 1, "popover-close-btn", 3, "click"], [1, "fa-solid", "fa-xmark"], [1, "popover-body"], [1, "lineage-group"], [1, "group-label"], [1, "lineage-items-list"], [1, "lineage-item"], [1, "fa-solid", "fa-arrow-turn-up", "item-icon", "ancestor-icon"], [1, "item-content"], ["type", "button", 1, "item-link", 3, "click"], [1, "item-meta"], [1, "fa-solid", "fa-clone", "item-icon", "clone-icon"]], template: function CloneLineageChipComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, CloneLineageChipComponent_Conditional_0_Template, 7, 9, "div", 2);
+        } if (rf & 2) {
+            i0.ɵɵconditional(ctx.HasLineage ? 0 : -1);
+        } }, dependencies: [CommonModule], styles: [".lineage-wrapper[_ngcontent-%COMP%] {\n            position: relative;\n            display: inline-flex;\n        }\n\n        .lineage-chip-btn[_ngcontent-%COMP%] {\n            display: inline-flex;\n            align-items: center;\n            gap: 5px;\n            padding: 2px 8px;\n            background: var(--mj-bg-surface-card);\n            border: 1px solid var(--mj-border-default);\n            border-radius: var(--mj-radius-lg);\n            font-size: var(--mj-text-xs);\n            color: var(--mj-text-secondary);\n            cursor: pointer;\n            transition: all 0.15s ease-in-out;\n            user-select: none;\n        }\n\n        .lineage-chip-btn[_ngcontent-%COMP%]:hover, .lineage-chip-btn.active[_ngcontent-%COMP%] {\n            background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n            border-color: var(--mj-brand-primary);\n            color: var(--mj-brand-primary);\n        }\n\n        .chip-label[_ngcontent-%COMP%] {\n            font-weight: 500;\n            max-width: 160px;\n            overflow: hidden;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n        }\n\n        .lineage-popover[_ngcontent-%COMP%] {\n            position: absolute;\n            top: 100%;\n            left: 0;\n            margin-top: 4px;\n            width: 280px;\n            background: var(--mj-bg-surface);\n            border: 1px solid var(--mj-border-default);\n            border-radius: var(--mj-radius-md);\n            box-shadow: var(--mj-shadow-md);\n            z-index: 1000;\n            display: flex;\n            flex-direction: column;\n            overflow: hidden;\n        }\n\n        .popover-header[_ngcontent-%COMP%] {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            padding: 8px 12px;\n            background: var(--mj-bg-surface-card);\n            border-bottom: 1px solid var(--mj-border-default);\n        }\n\n        .popover-title[_ngcontent-%COMP%] {\n            font-size: var(--mj-text-xs);\n            font-weight: 600;\n            color: var(--mj-text-primary);\n            display: flex;\n            align-items: center;\n            gap: 6px;\n        }\n\n        .popover-close-btn[_ngcontent-%COMP%] {\n            background: none;\n            border: none;\n            color: var(--mj-text-muted);\n            cursor: pointer;\n            padding: 2px;\n            font-size: 11px;\n        }\n\n        .popover-body[_ngcontent-%COMP%] {\n            padding: 8px 12px;\n            max-height: 280px;\n            overflow-y: auto;\n            display: flex;\n            flex-direction: column;\n            gap: 12px;\n        }\n\n        .lineage-group[_ngcontent-%COMP%] {\n            display: flex;\n            flex-direction: column;\n            gap: 6px;\n        }\n\n        .group-label[_ngcontent-%COMP%] {\n            font-size: 10px;\n            font-weight: 700;\n            text-transform: uppercase;\n            letter-spacing: 0.5px;\n            color: var(--mj-text-muted);\n        }\n\n        .lineage-items-list[_ngcontent-%COMP%] {\n            display: flex;\n            flex-direction: column;\n            gap: 6px;\n        }\n\n        .lineage-item[_ngcontent-%COMP%] {\n            display: flex;\n            align-items: flex-start;\n            gap: 8px;\n        }\n\n        .item-icon[_ngcontent-%COMP%] {\n            font-size: 11px;\n            margin-top: 3px;\n        }\n\n        .ancestor-icon[_ngcontent-%COMP%] {\n            color: var(--mj-brand-primary);\n        }\n\n        .clone-icon[_ngcontent-%COMP%] {\n            color: var(--mj-status-success-text);\n        }\n\n        .item-content[_ngcontent-%COMP%] {\n            display: flex;\n            flex-direction: column;\n            gap: 1px;\n            min-width: 0;\n            flex: 1;\n        }\n\n        .item-link[_ngcontent-%COMP%] {\n            background: none;\n            border: none;\n            padding: 0;\n            margin: 0;\n            text-align: left;\n            font-size: var(--mj-text-xs);\n            font-weight: 500;\n            color: var(--mj-brand-primary);\n            cursor: pointer;\n            overflow: hidden;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n        }\n\n        .item-link[_ngcontent-%COMP%]:hover {\n            text-decoration: underline;\n        }\n\n        .item-meta[_ngcontent-%COMP%] {\n            font-size: 10px;\n            color: var(--mj-text-muted);\n        }"], changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CloneLineageChipComponent, [{
+        type: Component,
+        args: [{ standalone: true, selector: 'mj-clone-lineage-chip', template: `
+        @if (HasLineage) {
+            <div class="lineage-wrapper" (keydown.escape)="OnEscape($event)">
+                <!-- Compact Chip Button -->
+                <button
+                    #chipTrigger
+                    type="button"
+                    class="lineage-chip-btn"
+                    [class.active]="IsOpen"
+                    [attr.aria-expanded]="IsOpen"
+                    [attr.aria-controls]="PopoverId"
+                    (click)="TogglePopover()"
+                    [title]="ChipTooltip">
+                    <i [class]="ChipIcon"></i>
+                    <span class="chip-label">{{ChipLabel}}</span>
+                </button>
+
+                <!-- Lineage Popover Menu -->
+                @if (IsOpen) {
+                    <!-- A disclosure panel, not a modal dialog: the page stays usable around it. -->
+                    <div class="lineage-popover" [id]="PopoverId" role="region" aria-label="Record lineage">
+                        <div class="popover-header">
+                            <span class="popover-title">
+                                <i class="fa-solid fa-code-fork"></i>
+                                Record Clone Lineage
+                            </span>
+                            <button
+                                #closeButton
+                                type="button"
+                                class="popover-close-btn"
+                                (click)="ClosePopover(true)"
+                                aria-label="Close lineage"
+                                title="Close">
+                                <i class="fa-solid fa-xmark"></i>
+                            </button>
+                        </div>
+
+                        <div class="popover-body">
+                            <!-- Ancestors Origin Section -->
+                            @if (Ancestors && Ancestors.length > 0) {
+                                <div class="lineage-group">
+                                    <span class="group-label">Ancestry Chain (Origins)</span>
+                                    <div class="lineage-items-list">
+                                        @for (item of Ancestors; track item.CloneLogID) {
+                                            <div class="lineage-item">
+                                                <i class="fa-solid fa-arrow-turn-up item-icon ancestor-icon"></i>
+                                                <div class="item-content">
+                                                    <button
+                                                        type="button"
+                                                        class="item-link"
+                                                        (click)="OnNavigate(item)">
+                                                        {{item.DisplayName || item.RecordID}}
+                                                    </button>
+                                                    <span class="item-meta">
+                                                        {{item.EntityName}}
+                                                        @if (item.ClonedBy) {
+                                                            • by {{item.ClonedBy}}
+                                                        }
+                                                    </span>
+                                                </div>
+                                            </div>
+                                        }
+                                    </div>
+                                </div>
+                            }
+
+                            <!-- Direct Source Section if no full ancestry -->
+                            @if (SourceRecord && (!Ancestors || Ancestors.length === 0)) {
+                                <div class="lineage-group">
+                                    <span class="group-label">Cloned From</span>
+                                    <div class="lineage-item">
+                                        <i class="fa-solid fa-arrow-turn-up item-icon ancestor-icon"></i>
+                                        <div class="item-content">
+                                            <button
+                                                type="button"
+                                                class="item-link"
+                                                (click)="OnNavigate(SourceRecord)">
+                                                {{SourceRecord.DisplayName || SourceRecord.RecordID}}
+                                            </button>
+                                            <span class="item-meta">
+                                                {{SourceRecord.EntityName}}
+                                                @if (SourceRecord.ClonedBy) {
+                                                    • by {{SourceRecord.ClonedBy}}
+                                                }
+                                            </span>
+                                        </div>
+                                    </div>
+                                </div>
+                            }
+
+                            <!-- Clones Created from This Record -->
+                            @if (Clones && Clones.length > 0) {
+                                <div class="lineage-group">
+                                    <span class="group-label">
+                                        Clones Created from This Record ({{Clones.length}})
+                                    </span>
+                                    <div class="lineage-items-list">
+                                        @for (clone of Clones; track clone.CloneLogID) {
+                                            <div class="lineage-item">
+                                                <i class="fa-solid fa-clone item-icon clone-icon"></i>
+                                                <div class="item-content">
+                                                    <button
+                                                        type="button"
+                                                        class="item-link"
+                                                        (click)="OnNavigate(clone)">
+                                                        {{clone.DisplayName || clone.RecordID}}
+                                                    </button>
+                                                    <span class="item-meta">
+                                                        {{clone.EntityName}}
+                                                        @if (clone.ClonedBy) {
+                                                            • by {{clone.ClonedBy}}
+                                                        }
+                                                    </span>
+                                                </div>
+                                            </div>
+                                        }
+                                    </div>
+                                </div>
+                            }
+                        </div>
+                    </div>
+                }
+            </div>
+        }
+    `, imports: [
+                    CommonModule,
+                ], changeDetection: ChangeDetectionStrategy.OnPush, styles: ["\n        .lineage-wrapper {\n            position: relative;\n            display: inline-flex;\n        }\n\n        .lineage-chip-btn {\n            display: inline-flex;\n            align-items: center;\n            gap: 5px;\n            padding: 2px 8px;\n            background: var(--mj-bg-surface-card);\n            border: 1px solid var(--mj-border-default);\n            border-radius: var(--mj-radius-lg);\n            font-size: var(--mj-text-xs);\n            color: var(--mj-text-secondary);\n            cursor: pointer;\n            transition: all 0.15s ease-in-out;\n            user-select: none;\n        }\n\n        .lineage-chip-btn:hover, .lineage-chip-btn.active {\n            background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n            border-color: var(--mj-brand-primary);\n            color: var(--mj-brand-primary);\n        }\n\n        .chip-label {\n            font-weight: 500;\n            max-width: 160px;\n            overflow: hidden;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n        }\n\n        .lineage-popover {\n            position: absolute;\n            top: 100%;\n            left: 0;\n            margin-top: 4px;\n            width: 280px;\n            background: var(--mj-bg-surface);\n            border: 1px solid var(--mj-border-default);\n            border-radius: var(--mj-radius-md);\n            box-shadow: var(--mj-shadow-md);\n            z-index: 1000;\n            display: flex;\n            flex-direction: column;\n            overflow: hidden;\n        }\n\n        .popover-header {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            padding: 8px 12px;\n            background: var(--mj-bg-surface-card);\n            border-bottom: 1px solid var(--mj-border-default);\n        }\n\n        .popover-title {\n            font-size: var(--mj-text-xs);\n            font-weight: 600;\n            color: var(--mj-text-primary);\n            display: flex;\n            align-items: center;\n            gap: 6px;\n        }\n\n        .popover-close-btn {\n            background: none;\n            border: none;\n            color: var(--mj-text-muted);\n            cursor: pointer;\n            padding: 2px;\n            font-size: 11px;\n        }\n\n        .popover-body {\n            padding: 8px 12px;\n            max-height: 280px;\n            overflow-y: auto;\n            display: flex;\n            flex-direction: column;\n            gap: 12px;\n        }\n\n        .lineage-group {\n            display: flex;\n            flex-direction: column;\n            gap: 6px;\n        }\n\n        .group-label {\n            font-size: 10px;\n            font-weight: 700;\n            text-transform: uppercase;\n            letter-spacing: 0.5px;\n            color: var(--mj-text-muted);\n        }\n\n        .lineage-items-list {\n            display: flex;\n            flex-direction: column;\n            gap: 6px;\n        }\n\n        .lineage-item {\n            display: flex;\n            align-items: flex-start;\n            gap: 8px;\n        }\n\n        .item-icon {\n            font-size: 11px;\n            margin-top: 3px;\n        }\n\n        .ancestor-icon {\n            color: var(--mj-brand-primary);\n        }\n\n        .clone-icon {\n            color: var(--mj-status-success-text);\n        }\n\n        .item-content {\n            display: flex;\n            flex-direction: column;\n            gap: 1px;\n            min-width: 0;\n            flex: 1;\n        }\n\n        .item-link {\n            background: none;\n            border: none;\n            padding: 0;\n            margin: 0;\n            text-align: left;\n            font-size: var(--mj-text-xs);\n            font-weight: 500;\n            color: var(--mj-brand-primary);\n            cursor: pointer;\n            overflow: hidden;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n        }\n\n        .item-link:hover {\n            text-decoration: underline;\n        }\n\n        .item-meta {\n            font-size: 10px;\n            color: var(--mj-text-muted);\n        }\n    "] }]
+    }], null, { EntityName: [{
+            type: Input
+        }], RecordKey: [{
+            type: Input
+        }], AutoLoad: [{
+            type: Input
+        }], LineageData: [{
+            type: Input
+        }], NavigateToRecord: [{
+            type: Output
+        }], chipTrigger: [{
+            type: ViewChild,
+            args: ['chipTrigger']
+        }], closeButton: [{
+            type: ViewChild,
+            args: ['closeButton']
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CloneLineageChipComponent, { className: "CloneLineageChipComponent", filePath: "src/lib/clone-lineage-chip.component.ts", lineNumber: 323 }); })();
+//# sourceMappingURL=clone-lineage-chip.component.js.map

package/dist/lib/clone-lineage-chip.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"clone-lineage-chip.component.js","sourceRoot":"","sources":["../../src/lib/clone-lineage-chip.component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @fileoverview Compact lineage chip and history popover component.\n *\n * Implements §12.3 of the Record Cloning architectural blueprint. Surfaces origin\n * and clone lineage metadata (\"Cloned from <name>\" or \"<n> clones\"). Clicking opens\n * a popover listing ancestral origins and descendant clones with safe navigation links.\n */\n\nimport {\n    Component,\n    ChangeDetectionStrategy,\n    Input,\n    Output,\n    EventEmitter,\n    OnInit,\n    ChangeDetectorRef,\n    ElementRef,\n    ViewChild,\n    inject,\n} from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport type {\n    RecordCloneKey,\n    RecordCloneGetLineageOutput,\n    RecordCloneLineageItem,\n} from '@memberjunction/core-entities';\nimport { CompositeKey } from '@memberjunction/core';\nimport { BaseAngularComponent } from '@memberjunction/ng-base-types';\nimport { RecordCloneService } from './record-clone.service';\nimport { CompositeKeyToRecordCloneKey, type CloneNavigationEvent } from './record-clone-types';\n\n@Component({\n    standalone: true,\n    selector: 'mj-clone-lineage-chip',\n    template: `\n        @if (HasLineage) {\n            <div class=\"lineage-wrapper\" (keydown.escape)=\"OnEscape($event)\">\n                <!-- Compact Chip Button -->\n                <button\n                    #chipTrigger\n                    type=\"button\"\n                    class=\"lineage-chip-btn\"\n                    [class.active]=\"IsOpen\"\n                    [attr.aria-expanded]=\"IsOpen\"\n                    [attr.aria-controls]=\"PopoverId\"\n                    (click)=\"TogglePopover()\"\n                    [title]=\"ChipTooltip\">\n                    <i [class]=\"ChipIcon\"></i>\n                    <span class=\"chip-label\">{{ChipLabel}}</span>\n                </button>\n\n                <!-- Lineage Popover Menu -->\n                @if (IsOpen) {\n                    <!-- A disclosure panel, not a modal dialog: the page stays usable around it. -->\n                    <div class=\"lineage-popover\" [id]=\"PopoverId\" role=\"region\" aria-label=\"Record lineage\">\n                        <div class=\"popover-header\">\n                            <span class=\"popover-title\">\n                                <i class=\"fa-solid fa-code-fork\"></i>\n                                Record Clone Lineage\n                            </span>\n                            <button\n                                #closeButton\n                                type=\"button\"\n                                class=\"popover-close-btn\"\n                                (click)=\"ClosePopover(true)\"\n                                aria-label=\"Close lineage\"\n                                title=\"Close\">\n                                <i class=\"fa-solid fa-xmark\"></i>\n                            </button>\n                        </div>\n\n                        <div class=\"popover-body\">\n                            <!-- Ancestors Origin Section -->\n                            @if (Ancestors && Ancestors.length > 0) {\n                                <div class=\"lineage-group\">\n                                    <span class=\"group-label\">Ancestry Chain (Origins)</span>\n                                    <div class=\"lineage-items-list\">\n                                        @for (item of Ancestors; track item.CloneLogID) {\n                                            <div class=\"lineage-item\">\n                                                <i class=\"fa-solid fa-arrow-turn-up item-icon ancestor-icon\"></i>\n                                                <div class=\"item-content\">\n                                                    <button\n                                                        type=\"button\"\n                                                        class=\"item-link\"\n                                                        (click)=\"OnNavigate(item)\">\n                                                        {{item.DisplayName || item.RecordID}}\n                                                    </button>\n                                                    <span class=\"item-meta\">\n                                                        {{item.EntityName}}\n                                                        @if (item.ClonedBy) {\n                                                            • by {{item.ClonedBy}}\n                                                        }\n                                                    </span>\n                                                </div>\n                                            </div>\n                                        }\n                                    </div>\n                                </div>\n                            }\n\n                            <!-- Direct Source Section if no full ancestry -->\n                            @if (SourceRecord && (!Ancestors || Ancestors.length === 0)) {\n                                <div class=\"lineage-group\">\n                                    <span class=\"group-label\">Cloned From</span>\n                                    <div class=\"lineage-item\">\n                                        <i class=\"fa-solid fa-arrow-turn-up item-icon ancestor-icon\"></i>\n                                        <div class=\"item-content\">\n                                            <button\n                                                type=\"button\"\n                                                class=\"item-link\"\n                                                (click)=\"OnNavigate(SourceRecord)\">\n                                                {{SourceRecord.DisplayName || SourceRecord.RecordID}}\n                                            </button>\n                                            <span class=\"item-meta\">\n                                                {{SourceRecord.EntityName}}\n                                                @if (SourceRecord.ClonedBy) {\n                                                    • by {{SourceRecord.ClonedBy}}\n                                                }\n                                            </span>\n                                        </div>\n                                    </div>\n                                </div>\n                            }\n\n                            <!-- Clones Created from This Record -->\n                            @if (Clones && Clones.length > 0) {\n                                <div class=\"lineage-group\">\n                                    <span class=\"group-label\">\n                                        Clones Created from This Record ({{Clones.length}})\n                                    </span>\n                                    <div class=\"lineage-items-list\">\n                                        @for (clone of Clones; track clone.CloneLogID) {\n                                            <div class=\"lineage-item\">\n                                                <i class=\"fa-solid fa-clone item-icon clone-icon\"></i>\n                                                <div class=\"item-content\">\n                                                    <button\n                                                        type=\"button\"\n                                                        class=\"item-link\"\n                                                        (click)=\"OnNavigate(clone)\">\n                                                        {{clone.DisplayName || clone.RecordID}}\n                                                    </button>\n                                                    <span class=\"item-meta\">\n                                                        {{clone.EntityName}}\n                                                        @if (clone.ClonedBy) {\n                                                            • by {{clone.ClonedBy}}\n                                                        }\n                                                    </span>\n                                                </div>\n                                            </div>\n                                        }\n                                    </div>\n                                </div>\n                            }\n                        </div>\n                    </div>\n                }\n            </div>\n        }\n    `,\n    styles: [`\n        .lineage-wrapper {\n            position: relative;\n            display: inline-flex;\n        }\n\n        .lineage-chip-btn {\n            display: inline-flex;\n            align-items: center;\n            gap: 5px;\n            padding: 2px 8px;\n            background: var(--mj-bg-surface-card);\n            border: 1px solid var(--mj-border-default);\n            border-radius: var(--mj-radius-lg);\n            font-size: var(--mj-text-xs);\n            color: var(--mj-text-secondary);\n            cursor: pointer;\n            transition: all 0.15s ease-in-out;\n            user-select: none;\n        }\n\n        .lineage-chip-btn:hover, .lineage-chip-btn.active {\n            background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n            border-color: var(--mj-brand-primary);\n            color: var(--mj-brand-primary);\n        }\n\n        .chip-label {\n            font-weight: 500;\n            max-width: 160px;\n            overflow: hidden;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n        }\n\n        .lineage-popover {\n            position: absolute;\n            top: 100%;\n            left: 0;\n            margin-top: 4px;\n            width: 280px;\n            background: var(--mj-bg-surface);\n            border: 1px solid var(--mj-border-default);\n            border-radius: var(--mj-radius-md);\n            box-shadow: var(--mj-shadow-md);\n            z-index: 1000;\n            display: flex;\n            flex-direction: column;\n            overflow: hidden;\n        }\n\n        .popover-header {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            padding: 8px 12px;\n            background: var(--mj-bg-surface-card);\n            border-bottom: 1px solid var(--mj-border-default);\n        }\n\n        .popover-title {\n            font-size: var(--mj-text-xs);\n            font-weight: 600;\n            color: var(--mj-text-primary);\n            display: flex;\n            align-items: center;\n            gap: 6px;\n        }\n\n        .popover-close-btn {\n            background: none;\n            border: none;\n            color: var(--mj-text-muted);\n            cursor: pointer;\n            padding: 2px;\n            font-size: 11px;\n        }\n\n        .popover-body {\n            padding: 8px 12px;\n            max-height: 280px;\n            overflow-y: auto;\n            display: flex;\n            flex-direction: column;\n            gap: 12px;\n        }\n\n        .lineage-group {\n            display: flex;\n            flex-direction: column;\n            gap: 6px;\n        }\n\n        .group-label {\n            font-size: 10px;\n            font-weight: 700;\n            text-transform: uppercase;\n            letter-spacing: 0.5px;\n            color: var(--mj-text-muted);\n        }\n\n        .lineage-items-list {\n            display: flex;\n            flex-direction: column;\n            gap: 6px;\n        }\n\n        .lineage-item {\n            display: flex;\n            align-items: flex-start;\n            gap: 8px;\n        }\n\n        .item-icon {\n            font-size: 11px;\n            margin-top: 3px;\n        }\n\n        .ancestor-icon {\n            color: var(--mj-brand-primary);\n        }\n\n        .clone-icon {\n            color: var(--mj-status-success-text);\n        }\n\n        .item-content {\n            display: flex;\n            flex-direction: column;\n            gap: 1px;\n            min-width: 0;\n            flex: 1;\n        }\n\n        .item-link {\n            background: none;\n            border: none;\n            padding: 0;\n            margin: 0;\n            text-align: left;\n            font-size: var(--mj-text-xs);\n            font-weight: 500;\n            color: var(--mj-brand-primary);\n            cursor: pointer;\n            overflow: hidden;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n        }\n\n        .item-link:hover {\n            text-decoration: underline;\n        }\n\n        .item-meta {\n            font-size: 10px;\n            color: var(--mj-text-muted);\n        }\n    `],\n    imports: [\n        CommonModule,\n    ],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CloneLineageChipComponent extends BaseAngularComponent implements OnInit {\n    private cloneService = inject(RecordCloneService);\n    private cdr = inject(ChangeDetectorRef);\n\n    /** Entity of the record whose lineage to show. */\n    @Input() EntityName = '';\n    /** Key of the record: a RecordCloneKey or a record-id string (`CompositeKey.FromURLSegment` form). */\n    @Input() RecordKey: RecordCloneKey | string = '';\n    /** Load lineage on init. Set false and call `LoadLineage()` to control timing. */\n    @Input() AutoLoad = true;\n    /** Pre-loaded lineage; skips the server call when set. */\n    @Input() LineageData: RecordCloneGetLineageOutput | null = null;\n\n    /** Asks the host to open an ancestor or clone from the popover. */\n    @Output() NavigateToRecord = new EventEmitter<CloneNavigationEvent>();\n\n    public IsOpen = false;\n    public IsLoading = false;\n\n    public get SourceRecord(): RecordCloneLineageItem | undefined {\n        if (!this.LineageData?.Ancestors || this.LineageData.Ancestors.length === 0) return undefined;\n        return this.LineageData.Ancestors[this.LineageData.Ancestors.length - 1];\n    }\n\n    public get Ancestors(): RecordCloneLineageItem[] | undefined {\n        return this.LineageData?.Ancestors;\n    }\n\n    public get Clones(): RecordCloneLineageItem[] | undefined {\n        return this.LineageData?.Clones;\n    }\n\n    public get HasLineage(): boolean {\n        return !!this.SourceRecord || (!!this.Clones && this.Clones.length > 0);\n    }\n\n    public get ChipIcon(): string {\n        if (this.SourceRecord) {\n            return 'fa-solid fa-code-branch';\n        }\n        return 'fa-solid fa-clone';\n    }\n\n    public get ChipLabel(): string {\n        if (this.SourceRecord) {\n            return `Cloned from ${this.SourceRecord.DisplayName || this.SourceRecord.RecordID}`;\n        }\n        if (this.Clones && this.Clones.length > 0) {\n            return `${this.Clones.length} clone${this.Clones.length === 1 ? '' : 's'}`;\n        }\n        return 'Lineage';\n    }\n\n    public get ChipTooltip(): string {\n        if (this.SourceRecord) {\n            return `View clone origin and lineage history`;\n        }\n        return `View records cloned from this record`;\n    }\n\n    public async ngOnInit(): Promise<void> {\n        if (this.AutoLoad && !this.LineageData && this.EntityName && this.RecordKey) {\n            await this.LoadLineage();\n        }\n    }\n\n    public async LoadLineage(): Promise<void> {\n        this.IsLoading = true;\n        this.cdr.markForCheck();\n        try {\n            const key: RecordCloneKey = typeof this.RecordKey === 'string'\n                ? CompositeKeyToRecordCloneKey(\n                      CompositeKey.FromURLSegment(this.ProviderToUse?.EntityByName(this.EntityName), this.RecordKey)\n                  )\n                : this.RecordKey;\n\n            this.LineageData = await this.cloneService.GetLineage(\n                {\n                    EntityName: this.EntityName,\n                    Key: key,\n                    Direction: 'both',\n                },\n                this.ProviderToUse\n            );\n        } catch {\n            this.LineageData = null;\n        } finally {\n            this.IsLoading = false;\n            this.cdr.markForCheck();\n        }\n    }\n\n    private static nextId = 0;\n    /** Ties the chip's aria-controls to its popover. */\n    public readonly PopoverId = `mj-clone-lineage-${++CloneLineageChipComponent.nextId}`;\n    @ViewChild('chipTrigger') private chipTrigger?: ElementRef<HTMLButtonElement>;\n    @ViewChild('closeButton') private closeButton?: ElementRef<HTMLButtonElement>;\n\n    public TogglePopover(): void {\n        this.IsOpen = !this.IsOpen;\n        this.cdr.detectChanges();\n        // Move focus into the panel on open, so keyboard users land in it.\n        if (this.IsOpen) this.closeButton?.nativeElement.focus();\n    }\n\n    /** Closes the popover; `returnFocus` puts focus back on the chip (Escape, the close button). */\n    public ClosePopover(returnFocus = false): void {\n        this.IsOpen = false;\n        this.cdr.markForCheck();\n        if (returnFocus) this.chipTrigger?.nativeElement.focus();\n    }\n\n    public OnEscape(event: Event): void {\n        if (!this.IsOpen) return;\n        event.stopPropagation();\n        this.ClosePopover(true);\n    }\n\n    public OnNavigate(item: RecordCloneLineageItem): void {\n        // Back to the chip: the host may open the record in another tab, leaving this page as it was.\n        this.ClosePopover(true);\n        this.NavigateToRecord.emit({\n            Kind: 'record',\n            EntityName: item.EntityName,\n            RecordKey: item.RecordID,\n        });\n    }\n}\n"]}

package/dist/lib/clone-plan-tree.component.d.ts

@@ -0,0 +1,51 @@
+/**
+ * @fileoverview Expandable hierarchical tree rendering a RecordClonePlan.
+ *
+ * Implements §12.3 & §12.4 of the Record Cloning architectural blueprint. Renders the
+ * planned record graph as an interactive tree with per-edge policy pills (Deep/Reference/Skip)
+ * with lock tooltips, per-node action badges, entity counts summary, and live search.
+ */
+import { EventEmitter } from '@angular/core';
+import type { RecordClonePlanDetails, RecordClonePlanNode, RecordClonePlanEdge } from '@memberjunction/core-entities';
+import type { CloneTreeNodeViewModel, CloneEdgePolicyChange } from './record-clone-types';
+import * as i0 from "@angular/core";
+export declare class ClonePlanTreeComponent {
+    private _plan;
+    private cdr;
+    /** The plan to render. Setting it rebuilds the tree. */
+    set Plan(value: RecordClonePlanDetails | null);
+    get Plan(): RecordClonePlanDetails | null;
+    /** Key of the node to highlight, e.g. when the review step links back to it. */
+    SelectedNodeKey: string | null;
+    /** Let the user switch unlocked Deep branches to Skip (narrowing). Default false (read-only tree). */
+    AllowNarrowing: boolean;
+    /** Also let the user switch Skip branches to Deep (widening; needs Clone Records: Override Scope). */
+    AllowWidening: boolean;
+    /** Fires when the user selects a node row. */
+    NodeSelected: EventEmitter<RecordClonePlanNode>;
+    /** Fires when the user switches a branch's policy; the host re-plans with it as an edge override. */
+    EdgePolicyChanged: EventEmitter<CloneEdgePolicyChange>;
+    SearchTerm: string;
+    TreeNodes: CloneTreeNodeViewModel[];
+    FlatVisibleNodes: CloneTreeNodeViewModel[];
+    get ReferenceCount(): number;
+    /** Blocked only because prompted values haven't been entered yet: not a problem on the Scope step. */
+    get NeedsValuesOnly(): boolean;
+    get SkipCount(): number;
+    OnSearchTermChange(term: string): void;
+    OnSelectNode(node: RecordClonePlanNode): void;
+    OnToggleExpand(item: CloneTreeNodeViewModel, event: MouseEvent): void;
+    ExpandAll(): void;
+    CollapseAll(): void;
+    /** The policy a click on this edge's pill would switch to, or null when the pill is read-only. */
+    NextPolicy(edge: RecordClonePlanEdge): 'Deep' | 'Skip' | null;
+    OnPolicyToggle(edge: RecordClonePlanEdge, policy: 'Deep' | 'Skip', event: MouseEvent): void;
+    GetEdgeTooltip(edge: RecordClonePlanEdge): string;
+    private setAllExpanded;
+    private rebuildTree;
+    private updateVisibleNodes;
+    private subtreeMatches;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ClonePlanTreeComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ClonePlanTreeComponent, "mj-clone-plan-tree", never, { "Plan": { "alias": "Plan"; "required": false; }; "SelectedNodeKey": { "alias": "SelectedNodeKey"; "required": false; }; "AllowNarrowing": { "alias": "AllowNarrowing"; "required": false; }; "AllowWidening": { "alias": "AllowWidening"; "required": false; }; }, { "NodeSelected": "NodeSelected"; "EdgePolicyChanged": "EdgePolicyChanged"; }, never, never, true, never>;
+}
+//# sourceMappingURL=clone-plan-tree.component.d.ts.map

package/dist/lib/clone-plan-tree.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"clone-plan-tree.component.d.ts","sourceRoot":"","sources":["../../src/lib/clone-plan-tree.component.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAKH,YAAY,EAGf,MAAM,eAAe,CAAC;AAIvB,OAAO,KAAK,EACR,sBAAsB,EACtB,mBAAmB,EACnB,mBAAmB,EACtB,MAAM,+BAA+B,CAAC;AACvC,OAAO,KAAK,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;;AAE1F,qBA2da,sBAAsB;IAC/B,OAAO,CAAC,KAAK,CAAuC;IACpD,OAAO,CAAC,GAAG,CAA6B;IAExC,wDAAwD;IACxD,IACI,IAAI,CAAC,KAAK,EAAE,sBAAsB,GAAG,IAAI,EAG5C;IACD,IAAI,IAAI,IAAI,sBAAsB,GAAG,IAAI,CAExC;IAED,gFAAgF;IACvE,eAAe,EAAE,MAAM,GAAG,IAAI,CAAQ;IAE/C,sGAAsG;IAC7F,cAAc,UAAS;IAEhC,sGAAsG;IAC7F,aAAa,UAAS;IAE/B,8CAA8C;IACpC,YAAY,oCAA2C;IAEjE,qGAAqG;IAC3F,iBAAiB,sCAA6C;IAEjE,UAAU,SAAM;IAChB,SAAS,EAAE,sBAAsB,EAAE,CAAM;IACzC,gBAAgB,EAAE,sBAAsB,EAAE,CAAM;IAEvD,IAAW,cAAc,IAAI,MAAM,CAGlC;IAED,sGAAsG;IACtG,IAAW,eAAe,IAAI,OAAO,CAGpC;IAED,IAAW,SAAS,IAAI,MAAM,CAG7B;IAEM,kBAAkB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAMtC,YAAY,CAAC,IAAI,EAAE,mBAAmB,GAAG,IAAI;IAM7C,cAAc,CAAC,IAAI,EAAE,sBAAsB,EAAE,KAAK,EAAE,UAAU,GAAG,IAAI;IAOrE,SAAS,IAAI,IAAI;IAMjB,WAAW,IAAI,IAAI;IAM1B,kGAAkG;IAC3F,UAAU,CAAC,IAAI,EAAE,mBAAmB,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI;IAQ7D,cAAc,CAAC,IAAI,EAAE,mBAAmB,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,EAAE,UAAU,GAAG,IAAI;IAM3F,cAAc,CAAC,IAAI,EAAE,mBAAmB,GAAG,MAAM;IAOxD,OAAO,CAAC,cAAc;IAStB,OAAO,CAAC,WAAW;IA2CnB,OAAO,CAAC,kBAAkB;IA0B1B,OAAO,CAAC,cAAc;yCApLb,sBAAsB;2CAAtB,sBAAsB;CAiMlC"}