@memberjunction/ng-entity-viewer 5.27.1 → 5.28.0

package/dist/lib/recycle-bin/recycle-bin.component.js

@@ -0,0 +1,681 @@
+import { Component, ChangeDetectionStrategy, EventEmitter, Input, Output, ViewEncapsulation, } from '@angular/core';
+import { Metadata, RunView, } from '@memberjunction/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@memberjunction/ng-shared-generic";
+import * as i2 from "@memberjunction/ng-record-changes";
+import * as i3 from "@memberjunction/ng-versions";
+const _forTrack0 = ($index, $item) => $item.RecordChange.ID;
+const _forTrack1 = ($index, $item) => $item.Name;
+function RecycleBinComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 7);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.HeaderSubtitle);
+} }
+function RecycleBinComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 8);
+    i0.ɵɵelement(1, "i", 14);
+    i0.ɵɵelementStart(2, "h3");
+    i0.ɵɵtext(3, "Access denied");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "p");
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r0.LoadError);
+} }
+function RecycleBinComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-loading", 9);
+} }
+function RecycleBinComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 10);
+    i0.ɵɵelement(1, "i", 15);
+    i0.ɵɵelementStart(2, "h3");
+    i0.ɵɵtext(3, "Could not load deleted records");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "p");
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r0.LoadError);
+} }
+function RecycleBinComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 11);
+    i0.ɵɵelement(1, "i", 16);
+    i0.ɵɵelementStart(2, "h3");
+    i0.ɵɵtext(3, "Recycle Bin is empty");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "p");
+    i0.ɵɵtext(5, "No records have been deleted from this entity, or change tracking isn't enabled here.");
+    i0.ɵɵelementEnd()();
+} }
+function RecycleBinComponent_Conditional_13_For_2_Conditional_4_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 26)(1, "strong");
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const sf_r3 = ctx.$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("", sf_r3.DisplayName, ":");
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", sf_r3.Value, " ");
+} }
+function RecycleBinComponent_Conditional_13_For_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 20);
+    i0.ɵɵrepeaterCreate(1, RecycleBinComponent_Conditional_13_For_2_Conditional_4_For_2_Template, 4, 2, "span", 26, _forTrack1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const entry_r4 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(entry_r4.SupportingFields);
+} }
+function RecycleBinComponent_Conditional_13_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+} if (rf & 2) {
+    const entry_r4 = i0.ɵɵnextContext().$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵtextInterpolate1(" by ", ctx_r0.getUserDisplay(entry_r4.RecordChange.User), " ");
+} }
+function RecycleBinComponent_Conditional_13_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 17)(1, "div", 18)(2, "div", 19);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(4, RecycleBinComponent_Conditional_13_For_2_Conditional_4_Template, 3, 0, "div", 20);
+    i0.ɵɵelementStart(5, "div", 21);
+    i0.ɵɵelement(6, "i", 22);
+    i0.ɵɵtext(7);
+    i0.ɵɵconditionalCreate(8, RecycleBinComponent_Conditional_13_For_2_Conditional_8_Template, 1, 1);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(9, "div", 23)(10, "button", 24);
+    i0.ɵɵlistener("click", function RecycleBinComponent_Conditional_13_For_2_Template_button_click_10_listener() { const entry_r4 = i0.ɵɵrestoreView(_r2).$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.OnRestoreClicked(entry_r4)); });
+    i0.ɵɵelement(11, "i", 25);
+    i0.ɵɵtext(12, " Restore ");
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const entry_r4 = ctx.$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(entry_r4.DisplaySummary);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(entry_r4.SupportingFields.length > 0 ? 4 : -1);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1(" Deleted ", ctx_r0.formatTimestamp(entry_r4.RecordChange.ChangedAt), " ");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(entry_r4.RecordChange.User ? 8 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("disabled", !ctx_r0.CanCreate)("title", ctx_r0.CanCreate ? "Re-create this record from its snapshot" : "You do not have Create permission for this entity");
+} }
+function RecycleBinComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 12);
+    i0.ɵɵrepeaterCreate(1, RecycleBinComponent_Conditional_13_For_2_Template, 13, 6, "div", 17, _forTrack0);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r0.Entries);
+} }
+/**
+ * Slide-in panel that lists all hard-deleted records for a single entity
+ * and lets a user with `Delete` permission re-create any of them from its
+ * historical RecordChange snapshot.
+ *
+ * ### When to use
+ *
+ * Surface this component from any entity-viewing context where the user
+ * might need to restore a hard-deleted record. The {@link EntityViewerComponent},
+ * {@link EntityDataGridComponent}, and {@link EntityCardsComponent}
+ * already expose a `ShowRecycleBin` input (default `true`) that renders a
+ * chip in their toolbar — you only need to use this component directly if
+ * you're building a custom viewer.
+ *
+ * ### Permissions
+ *
+ * The chip / panel is gated on `entity.UserPermissions.CanDelete` —
+ * rationale: there is no native "undelete" permission in MemberJunction,
+ * but if a user has the higher-trust permission to *delete* records of an
+ * entity, restoring deleted ones is well within scope. The actual
+ * re-create action additionally requires `CanCreate`; without it the
+ * Restore button on each card disables with a tooltip.
+ *
+ * ### Soft deletes vs hard deletes
+ *
+ * This component only surfaces *hard*-deleted records. Soft-deletes (e.g.,
+ * `IsDeleted` flags, `Status='Inactive'`, etc.) leave the record visible
+ * in normal entity views, so the standard Record Changes panel + restore
+ * preview already handles them — no Recycle Bin needed.
+ *
+ * ### Cancelable Before/After event surface
+ *
+ * Every meaningful action emits a paired `before*` / `after*` event. The
+ * `before*` event carries `cancel: boolean` so consumers can intercept
+ * — useful for custom approval workflows, audit logging, or to take over
+ * the actual restore execution entirely. See {@link BeforeRecordRestoreEventArgs}
+ * and friends.
+ *
+ * @example Basic usage (rare — usually embedded by entity-viewer)
+ *   <mj-recycle-bin
+ *     [Visible]="showBin"
+ *     [EntityName]="'Customers'"
+ *     (Closed)="showBin = false"
+ *     (BeforeRecordRestore)="auditRestore($event)"
+ *     (AfterRestoreCommit)="onRestored($event)">
+ *   </mj-recycle-bin>
+ *
+ * @example Intercepting a restore
+ *   onBeforeRecordRestore(e: BeforeRecordRestoreEventArgs) {
+ *     if (!myCustomApproval(e.entry)) {
+ *       e.cancel = true;
+ *       e.cancelReason = 'Awaiting compliance approval';
+ *     }
+ *   }
+ */
+export class RecycleBinComponent {
+    cdr;
+    // ─── Inputs ─────────────────────────────────────────────────────
+    /**
+     * Controls panel visibility. Set to true to slide in (and trigger an
+     * initial load); false to slide out.
+     */
+    _visible = false;
+    set Visible(value) {
+        const wasVisible = this._visible;
+        this._visible = value;
+        if (value && !wasVisible && this.isInitialized) {
+            this.LoadDeletedRecords();
+        }
+    }
+    get Visible() {
+        return this._visible;
+    }
+    /**
+     * The name of the entity whose deleted records will be listed. Required.
+     */
+    EntityName = null;
+    /**
+     * Optional context user. When omitted, falls back to
+     * {@link Metadata.Provider.CurrentUser} per standard MJ conventions.
+     */
+    ContextUser = null;
+    /**
+     * Maximum number of deleted-record cards to load. Defaults to 200 — this
+     * is a UI affordance, not a hard limit; consumers needing pagination
+     * should listen to {@link AfterRecycleBinOpen} and surface their own UI
+     * if `deletedRecordCount === MaxRecords`.
+     */
+    MaxRecords = 200;
+    // ─── Outputs ────────────────────────────────────────────────────
+    /** Fires when the user closes the panel. */
+    Closed = new EventEmitter();
+    /**
+     * Cancelable. Fires when {@link Visible} flips to true and the bin is
+     * about to query for deleted records. Setting `cancel = true` aborts
+     * the query (and the panel will show the empty state).
+     */
+    BeforeRecycleBinOpen = new EventEmitter();
+    /** Fires after the deleted-record query completes. */
+    AfterRecycleBinOpen = new EventEmitter();
+    /**
+     * Cancelable. Fires when the user clicks Restore on a deleted-record
+     * card, before the preview panel opens. Setting `cancel = true` skips
+     * the preview entirely — useful for consumers that want to take over
+     * the restore flow themselves.
+     */
+    BeforeRecordRestore = new EventEmitter();
+    /**
+     * Fires after the user closes the restore preview, with `success`
+     * indicating whether the actual insert worked.
+     */
+    AfterRecordRestore = new EventEmitter();
+    /**
+     * Cancelable. Fires after the user clicks Restore in the preview but
+     * before the entity is inserted. Setting `cancel = true` aborts the
+     * insert.
+     */
+    BeforeRestoreCommit = new EventEmitter();
+    /** Fires after the insert completes (success or failure). */
+    AfterRestoreCommit = new EventEmitter();
+    // ─── Public template state ──────────────────────────────────────
+    IsLoading = false;
+    LoadError = null;
+    Entries = [];
+    /** The currently selected entry whose preview is open. */
+    SelectedEntry = null;
+    PreviewVisible = false;
+    /** Permission flags (computed once when EntityName is set). */
+    CanDelete = false;
+    CanCreate = false;
+    isInitialized = false;
+    resolvedEntityInfo = null;
+    constructor(cdr) {
+        this.cdr = cdr;
+    }
+    ngOnInit() {
+        this.isInitialized = true;
+        if (this.Visible)
+            this.LoadDeletedRecords();
+    }
+    // ─── Derived state ──────────────────────────────────────────────
+    get HeaderSubtitle() {
+        if (!this.EntityName)
+            return '';
+        const n = this.Entries.length;
+        return `${n} record${n === 1 ? '' : 's'} have been deleted from ${this.EntityName}.`;
+    }
+    /**
+     * The user has Delete permission and may browse the bin. The Restore
+     * button on each card additionally requires {@link CanCreate}.
+     */
+    get HasAccess() {
+        return this.CanDelete;
+    }
+    // ─── Public actions ─────────────────────────────────────────────
+    /**
+     * Manually trigger a re-load — useful for consumers who want to refresh
+     * after some external event (e.g., a delete happened and they want the
+     * bin to re-populate immediately).
+     */
+    async LoadDeletedRecords() {
+        if (!this.EntityName) {
+            this.LoadError = 'EntityName is required';
+            return;
+        }
+        // Resolve metadata + permissions
+        const md = new Metadata();
+        const entityInfo = md.Entities.find(e => e.Name.trim().toLowerCase() === this.EntityName.trim().toLowerCase());
+        if (!entityInfo) {
+            this.LoadError = `Entity '${this.EntityName}' not found`;
+            this.cdr.markForCheck();
+            return;
+        }
+        this.resolvedEntityInfo = entityInfo;
+        const effectiveUser = this.ContextUser ?? md.CurrentUser;
+        if (effectiveUser) {
+            const perms = entityInfo.GetUserPermisions(effectiveUser);
+            this.CanDelete = perms?.CanDelete ?? false;
+            this.CanCreate = perms?.CanCreate ?? false;
+        }
+        else {
+            this.CanDelete = false;
+            this.CanCreate = false;
+        }
+        if (!this.CanDelete) {
+            this.Entries = [];
+            this.LoadError = 'You do not have Delete permission for this entity.';
+            this.cdr.markForCheck();
+            return;
+        }
+        // Fire BeforeRecycleBinOpen — consumer may cancel
+        const beforeArgs = {
+            bin: this,
+            timestamp: new Date(),
+            entityName: this.EntityName,
+            cancel: false,
+            _kind: 'beforeRecycleBinOpen',
+        };
+        this.BeforeRecycleBinOpen.emit(beforeArgs);
+        if (beforeArgs.cancel) {
+            this.LoadError = beforeArgs.cancelReason ?? 'Cancelled by host';
+            this.cdr.markForCheck();
+            return;
+        }
+        this.IsLoading = true;
+        this.LoadError = null;
+        this.Entries = [];
+        this.cdr.markForCheck();
+        try {
+            const rv = new RunView();
+            // Get the most recent Delete change per RecordID. We over-fetch and
+            // dedupe in JS — the data is small and SQL grouping with the latest
+            // change per ID is awkward across dialects.
+            const result = await rv.RunView({
+                EntityName: 'MJ: Record Changes',
+                ExtraFilter: `EntityID='${entityInfo.ID}' AND Type='Delete'`,
+                OrderBy: 'ChangedAt DESC',
+                MaxRows: this.MaxRecords * 2, // dedupe headroom
+                ResultType: 'entity_object',
+            }, this.ContextUser ?? undefined);
+            if (!result.Success) {
+                this.LoadError = result.ErrorMessage || 'Failed to load deleted records';
+            }
+            else {
+                this.Entries = this.dedupeAndBuildEntries(result.Results, entityInfo);
+            }
+        }
+        catch (e) {
+            this.LoadError = e instanceof Error ? e.message : 'Unknown error';
+        }
+        finally {
+            this.IsLoading = false;
+            this.cdr.markForCheck();
+        }
+        // Fire AfterRecycleBinOpen
+        this.AfterRecycleBinOpen.emit({
+            bin: this,
+            timestamp: new Date(),
+            entityName: this.EntityName,
+            deletedRecordCount: this.Entries.length,
+            _kind: 'afterRecycleBinOpen',
+        });
+    }
+    /**
+     * User clicked Restore on a card — open the preview panel (unless a
+     * BeforeRecordRestore handler cancelled).
+     */
+    OnRestoreClicked(entry) {
+        if (!this.CanCreate)
+            return; // gated in template too
+        const beforeArgs = {
+            bin: this,
+            timestamp: new Date(),
+            entityName: this.EntityName ?? '',
+            entry,
+            cancel: false,
+            _kind: 'beforeRecordRestore',
+        };
+        this.BeforeRecordRestore.emit(beforeArgs);
+        if (beforeArgs.cancel)
+            return;
+        this.SelectedEntry = entry;
+        this.PreviewVisible = true;
+        this.cdr.markForCheck();
+    }
+    /**
+     * Preview panel emitted RestoreConfirmed — perform the insert and emit
+     * the matching after* events.
+     */
+    async OnPreviewConfirmed(commit) {
+        if (!this.SelectedEntry || !this.resolvedEntityInfo)
+            return;
+        const entry = this.SelectedEntry;
+        const beforeArgs = {
+            bin: this,
+            timestamp: new Date(),
+            entityName: this.EntityName ?? '',
+            entry,
+            fieldValues: commit.FieldValues,
+            reason: commit.Reason,
+            cancel: false,
+            _kind: 'beforeRestoreCommit',
+        };
+        this.BeforeRestoreCommit.emit(beforeArgs);
+        if (beforeArgs.cancel) {
+            this.PreviewVisible = false;
+            this.cdr.markForCheck();
+            return;
+        }
+        let success = false;
+        let errorMessage;
+        let newRecordID;
+        try {
+            const md = new Metadata();
+            const entity = await md.GetEntityObject(this.resolvedEntityInfo.Name, this.ContextUser ?? undefined);
+            // Apply the snapshot fields, including the original primary key
+            // (preserves any FK references that still point at this ID).
+            for (const fv of commit.FieldValues) {
+                entity.Set(fv.FieldName, fv.Value);
+            }
+            // Also re-apply the original primary key from the snapshot so dangling
+            // FK references continue to work. Set() on a fresh entity treats this
+            // as the new record's PK.
+            try {
+                const snapshotData = JSON.parse(entry.RecordChange.FullRecordJSON || '{}');
+                for (const pk of this.resolvedEntityInfo.PrimaryKeys) {
+                    if (snapshotData[pk.Name] != null) {
+                        entity.Set(pk.Name, snapshotData[pk.Name]);
+                    }
+                }
+            }
+            catch {
+                // PK preservation is best-effort
+            }
+            entity.SetRestoreContext(commit.SourceChangeID, commit.Reason);
+            try {
+                success = await entity.Save();
+                if (success) {
+                    newRecordID = entity.PrimaryKey.ToString();
+                }
+                else {
+                    errorMessage = entity.LatestResult?.CompleteMessage ?? 'Save returned false';
+                }
+            }
+            finally {
+                entity.ClearRestoreContext();
+            }
+        }
+        catch (e) {
+            success = false;
+            errorMessage = e instanceof Error ? e.message : 'Unknown error';
+        }
+        this.AfterRestoreCommit.emit({
+            bin: this,
+            timestamp: new Date(),
+            entityName: this.EntityName ?? '',
+            entry,
+            success,
+            newRecordID,
+            errorMessage,
+            _kind: 'afterRestoreCommit',
+        });
+        this.AfterRecordRestore.emit({
+            bin: this,
+            timestamp: new Date(),
+            entityName: this.EntityName ?? '',
+            entry,
+            success,
+            errorMessage,
+            _kind: 'afterRecordRestore',
+        });
+        if (success) {
+            // Remove the restored entry from the list and close preview
+            this.Entries = this.Entries.filter(e => e !== entry);
+        }
+        this.PreviewVisible = false;
+        this.SelectedEntry = null;
+        this.cdr.markForCheck();
+    }
+    OnPreviewCancelled() {
+        this.PreviewVisible = false;
+        this.SelectedEntry = null;
+        this.cdr.markForCheck();
+    }
+    OnClose() {
+        this._visible = false;
+        this.cdr.markForCheck();
+        this.Closed.emit();
+    }
+    // ─── Internal: build entries from raw RecordChange rows ─────────
+    /**
+     * Dedupes the raw delete-change rows: keeps only the most recent Delete
+     * per RecordID (since a record could in principle have been recreated
+     * and re-deleted). Builds the display fields heuristically by reading
+     * the snapshot JSON.
+     */
+    dedupeAndBuildEntries(rows, entityInfo) {
+        const seen = new Set();
+        const entries = [];
+        for (const row of rows) {
+            if (entries.length >= this.MaxRecords)
+                break;
+            if (seen.has(row.RecordID))
+                continue;
+            seen.add(row.RecordID);
+            const snapshot = this.parseSnapshot(row.FullRecordJSON);
+            if (!snapshot)
+                continue;
+            const entry = {
+                RecordChange: row,
+                RecordID: row.RecordID,
+                DisplaySummary: this.buildDisplaySummary(snapshot, entityInfo),
+                SupportingFields: this.buildSupportingFields(snapshot, entityInfo),
+            };
+            entries.push(entry);
+        }
+        return entries;
+    }
+    /**
+     * Builds the headline of the card. Prefers the entity's name field, then
+     * any non-PK string field, then the RecordID itself as a last resort.
+     */
+    buildDisplaySummary(snapshot, entityInfo) {
+        const nameField = entityInfo.NameField;
+        if (nameField && snapshot[nameField.Name] != null && snapshot[nameField.Name] !== '') {
+            return String(snapshot[nameField.Name]);
+        }
+        // Fallback: first non-PK, non-empty string field
+        for (const f of entityInfo.Fields) {
+            if (f.IsPrimaryKey)
+                continue;
+            const v = snapshot[f.Name];
+            if (typeof v === 'string' && v.trim().length > 0)
+                return v;
+        }
+        return `Record ${snapshot[entityInfo.PrimaryKeys[0]?.Name] ?? ''}`;
+    }
+    /**
+     * Picks up to 3 "interesting" fields from the snapshot to render as
+     * supporting metadata under the headline. Heuristic: prefer fields that
+     * are non-empty, non-PK, non-system, and have a display name.
+     */
+    buildSupportingFields(snapshot, entityInfo) {
+        const out = [];
+        const nameFieldName = entityInfo.NameField?.Name;
+        for (const f of entityInfo.Fields) {
+            if (out.length >= 3)
+                break;
+            if (f.IsPrimaryKey)
+                continue;
+            if (f.Name.startsWith('__mj_'))
+                continue;
+            if (f.Name === nameFieldName)
+                continue;
+            const v = snapshot[f.Name];
+            if (v == null || v === '')
+                continue;
+            out.push({
+                Name: f.Name,
+                DisplayName: f.DisplayNameOrName,
+                Value: this.formatFieldValue(v, f),
+            });
+        }
+        return out;
+    }
+    formatFieldValue(value, _field) {
+        if (value == null)
+            return '';
+        if (typeof value === 'object') {
+            try {
+                return JSON.stringify(value);
+            }
+            catch {
+                return String(value);
+            }
+        }
+        return String(value);
+    }
+    parseSnapshot(json) {
+        if (!json)
+            return null;
+        try {
+            return JSON.parse(json);
+        }
+        catch {
+            return null;
+        }
+    }
+    // ─── Display helpers (template) ─────────────────────────────────
+    formatTimestamp(date) {
+        if (!date)
+            return '';
+        return new Intl.DateTimeFormat('en-US', {
+            year: 'numeric',
+            month: 'short',
+            day: 'numeric',
+            hour: 'numeric',
+            minute: '2-digit',
+            hour12: true,
+        }).format(new Date(date));
+    }
+    getUserDisplay(user) {
+        if (!user)
+            return 'Unknown';
+        if (user.includes('@'))
+            return user.split('@')[0];
+        return user;
+    }
+    static ɵfac = function RecycleBinComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || RecycleBinComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: RecycleBinComponent, selectors: [["mj-recycle-bin"]], inputs: { Visible: "Visible", EntityName: "EntityName", ContextUser: "ContextUser", MaxRecords: "MaxRecords" }, outputs: { Closed: "Closed", BeforeRecycleBinOpen: "BeforeRecycleBinOpen", AfterRecycleBinOpen: "AfterRecycleBinOpen", BeforeRecordRestore: "BeforeRecordRestore", AfterRecordRestore: "AfterRecordRestore", BeforeRestoreCommit: "BeforeRestoreCommit", AfterRestoreCommit: "AfterRestoreCommit" }, standalone: false, decls: 15, vars: 16, consts: [[3, "Closed", "Mode", "Title", "Visible", "Resizable", "MinWidthPx", "MaxWidthRatio"], [1, "rb-container"], [1, "rb-header"], [1, "rb-header-icon"], ["aria-hidden", "true", 1, "fa-solid", "fa-trash-can-arrow-up"], [1, "rb-header-text"], [1, "rb-header-title"], [1, "rb-header-subtitle"], [1, "rb-state", "rb-state-denied"], ["text", "Loading deleted records...", "size", "medium"], [1, "rb-state", "rb-state-error"], [1, "rb-state", "rb-state-empty"], [1, "rb-list"], [3, "RestoreConfirmed", "RestoreCancelled", "Visible", "Mode", "RecordChange", "EntityName"], ["aria-hidden", "true", 1, "fa-solid", "fa-lock"], ["aria-hidden", "true", 1, "fa-solid", "fa-triangle-exclamation"], ["aria-hidden", "true", 1, "fa-solid", "fa-trash-can"], [1, "rb-card"], [1, "rb-card-info"], [1, "rb-card-name"], [1, "rb-card-fields"], [1, "rb-card-meta"], ["aria-hidden", "true", 1, "fa-solid", "fa-trash"], [1, "rb-card-actions"], ["type", "button", 1, "rb-btn", "rb-btn-restore", 3, "click", "disabled", "title"], ["aria-hidden", "true", 1, "fa-solid", "fa-rotate-left"], [1, "rb-card-field"]], template: function RecycleBinComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "mj-slide-panel", 0);
+            i0.ɵɵlistener("Closed", function RecycleBinComponent_Template_mj_slide_panel_Closed_0_listener() { return ctx.OnClose(); });
+            i0.ɵɵelementStart(1, "div", 1)(2, "div", 2)(3, "div", 3);
+            i0.ɵɵelement(4, "i", 4);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(5, "div", 5)(6, "div", 6);
+            i0.ɵɵtext(7, "Recycle Bin");
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(8, RecycleBinComponent_Conditional_8_Template, 2, 1, "div", 7);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵconditionalCreate(9, RecycleBinComponent_Conditional_9_Template, 6, 1, "div", 8);
+            i0.ɵɵconditionalCreate(10, RecycleBinComponent_Conditional_10_Template, 1, 0, "mj-loading", 9);
+            i0.ɵɵconditionalCreate(11, RecycleBinComponent_Conditional_11_Template, 6, 1, "div", 10);
+            i0.ɵɵconditionalCreate(12, RecycleBinComponent_Conditional_12_Template, 6, 0, "div", 11);
+            i0.ɵɵconditionalCreate(13, RecycleBinComponent_Conditional_13_Template, 3, 0, "div", 12);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(14, "mj-restore-preview-panel", 13);
+            i0.ɵɵlistener("RestoreConfirmed", function RecycleBinComponent_Template_mj_restore_preview_panel_RestoreConfirmed_14_listener($event) { return ctx.OnPreviewConfirmed($event); })("RestoreCancelled", function RecycleBinComponent_Template_mj_restore_preview_panel_RestoreCancelled_14_listener() { return ctx.OnPreviewCancelled(); });
+            i0.ɵɵelementEnd()();
+        } if (rf & 2) {
+            i0.ɵɵproperty("Mode", "slide")("Title", "Recycle Bin \u00B7 " + (ctx.EntityName || ""))("Visible", ctx.Visible)("Resizable", true)("MinWidthPx", 480)("MaxWidthRatio", 0.6);
+            i0.ɵɵadvance(8);
+            i0.ɵɵconditional(ctx.EntityName ? 8 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(!ctx.IsLoading && ctx.LoadError && !ctx.HasAccess ? 9 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.IsLoading ? 10 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(!ctx.IsLoading && ctx.LoadError && ctx.HasAccess ? 11 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(!ctx.IsLoading && !ctx.LoadError && ctx.HasAccess && ctx.Entries.length === 0 ? 12 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(!ctx.IsLoading && !ctx.LoadError && ctx.Entries.length > 0 ? 13 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("Visible", ctx.PreviewVisible)("Mode", "undelete")("RecordChange", (ctx.SelectedEntry == null ? null : ctx.SelectedEntry.RecordChange) ?? null)("EntityName", ctx.EntityName);
+        } }, dependencies: [i1.LoadingComponent, i2.RestorePreviewPanelComponent, i3.MjSlidePanelComponent], styles: ["/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n *  Recycle Bin\n *  Slide-in panel that lists hard-deleted records and offers re-create.\n *  All colors use --mj-* design tokens.\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.rb-container {\n  padding: 18px 20px;\n  display: flex;\n  flex-direction: column;\n  gap: 14px;\n}\n\n/* \u2500\u2500\u2500 Header \u2500\u2500\u2500 */\n\n.rb-header {\n  display: flex;\n  align-items: flex-start;\n  gap: 14px;\n  padding: 8px 0 14px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.rb-header-icon {\n  width: 40px;\n  height: 40px;\n  border-radius: 9px;\n  background: color-mix(in srgb, var(--mj-status-info) 12%, var(--mj-bg-surface));\n  color: var(--mj-status-info);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  font-size: 17px;\n}\n\n.rb-header-text { flex: 1; min-width: 0; }\n\n.rb-header-title {\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin-bottom: 2px;\n}\n\n.rb-header-subtitle {\n  color: var(--mj-text-muted);\n  font-size: 12px;\n}\n\n/* \u2500\u2500\u2500 State (denied / error / empty) \u2500\u2500\u2500 */\n\n.rb-state {\n  text-align: center;\n  padding: 50px 20px;\n  color: var(--mj-text-muted);\n}\n\n.rb-state i {\n  font-size: 36px;\n  margin-bottom: 12px;\n  display: block;\n}\n\n.rb-state h3 {\n  margin: 0 0 6px;\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.rb-state p {\n  margin: 0;\n  font-size: 13px;\n  max-width: 320px;\n  margin-left: auto;\n  margin-right: auto;\n}\n\n.rb-state-denied i { color: var(--mj-text-disabled); }\n.rb-state-error i  { color: var(--mj-status-error); }\n.rb-state-empty i  { color: var(--mj-text-disabled); }\n\n/* \u2500\u2500\u2500 List \u2500\u2500\u2500 */\n\n.rb-list {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n/* \u2500\u2500\u2500 Card \u2500\u2500\u2500 */\n\n.rb-card {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  padding: 14px;\n  display: grid;\n  grid-template-columns: 1fr auto;\n  gap: 14px;\n  align-items: center;\n  transition: border-color 0.15s;\n}\n\n.rb-card:hover {\n  border-color: var(--mj-border-strong);\n}\n\n.rb-card-info { min-width: 0; }\n\n.rb-card-name {\n  font-weight: 600;\n  font-size: 14px;\n  color: var(--mj-text-primary);\n  margin-bottom: 5px;\n  word-break: break-word;\n}\n\n.rb-card-fields {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 10px;\n  margin-bottom: 6px;\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n.rb-card-field strong {\n  color: var(--mj-text-secondary);\n  font-weight: 500;\n  margin-right: 3px;\n}\n\n.rb-card-meta {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  color: var(--mj-text-muted);\n  font-size: 11px;\n}\n\n.rb-card-meta i {\n  color: var(--mj-text-disabled);\n}\n\n/* \u2500\u2500\u2500 Card actions \u2500\u2500\u2500 */\n\n.rb-card-actions {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n.rb-btn {\n  padding: 7px 14px;\n  border-radius: 7px;\n  font-size: 12px;\n  font-weight: 600;\n  cursor: pointer;\n  border: 1px solid transparent;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-family: inherit;\n  background: var(--mj-bg-surface);\n  transition: background-color 0.1s, color 0.1s, border-color 0.1s;\n}\n\n.rb-btn-restore {\n  color: var(--mj-status-success);\n  border-color: var(--mj-status-success);\n}\n\n.rb-btn-restore:hover:not(:disabled) {\n  background: var(--mj-status-success);\n  color: var(--mj-text-inverse, #fff);\n}\n\n.rb-btn-restore:disabled {\n  color: var(--mj-text-disabled);\n  border-color: var(--mj-border-default);\n  background: var(--mj-bg-surface-sunken);\n  cursor: not-allowed;\n}\n"], encapsulation: 2, changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RecycleBinComponent, [{
+        type: Component,
+        args: [{ standalone: false, selector: 'mj-recycle-bin', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<mj-slide-panel\n  [Mode]=\"'slide'\"\n  [Title]=\"'Recycle Bin \u00B7 ' + (EntityName || '')\"\n  [Visible]=\"Visible\"\n  [Resizable]=\"true\"\n  [MinWidthPx]=\"480\"\n  [MaxWidthRatio]=\"0.6\"\n  (Closed)=\"OnClose()\">\n\n  <div class=\"rb-container\">\n\n    <!-- Header -->\n    <div class=\"rb-header\">\n      <div class=\"rb-header-icon\">\n        <i class=\"fa-solid fa-trash-can-arrow-up\" aria-hidden=\"true\"></i>\n      </div>\n      <div class=\"rb-header-text\">\n        <div class=\"rb-header-title\">Recycle Bin</div>\n        @if (EntityName) {\n          <div class=\"rb-header-subtitle\">{{ HeaderSubtitle }}</div>\n        }\n      </div>\n    </div>\n\n    <!-- No-permission state -->\n    @if (!IsLoading && LoadError && !HasAccess) {\n      <div class=\"rb-state rb-state-denied\">\n        <i class=\"fa-solid fa-lock\" aria-hidden=\"true\"></i>\n        <h3>Access denied</h3>\n        <p>{{ LoadError }}</p>\n      </div>\n    }\n\n    <!-- Loading -->\n    @if (IsLoading) {\n      <mj-loading text=\"Loading deleted records...\" size=\"medium\"></mj-loading>\n    }\n\n    <!-- Generic error -->\n    @if (!IsLoading && LoadError && HasAccess) {\n      <div class=\"rb-state rb-state-error\">\n        <i class=\"fa-solid fa-triangle-exclamation\" aria-hidden=\"true\"></i>\n        <h3>Could not load deleted records</h3>\n        <p>{{ LoadError }}</p>\n      </div>\n    }\n\n    <!-- Empty state -->\n    @if (!IsLoading && !LoadError && HasAccess && Entries.length === 0) {\n      <div class=\"rb-state rb-state-empty\">\n        <i class=\"fa-solid fa-trash-can\" aria-hidden=\"true\"></i>\n        <h3>Recycle Bin is empty</h3>\n        <p>No records have been deleted from this entity, or change tracking\n          isn't enabled here.</p>\n      </div>\n    }\n\n    <!-- Entries -->\n    @if (!IsLoading && !LoadError && Entries.length > 0) {\n      <div class=\"rb-list\">\n        @for (entry of Entries; track entry.RecordChange.ID) {\n          <div class=\"rb-card\">\n            <div class=\"rb-card-info\">\n              <div class=\"rb-card-name\">{{ entry.DisplaySummary }}</div>\n              @if (entry.SupportingFields.length > 0) {\n                <div class=\"rb-card-fields\">\n                  @for (sf of entry.SupportingFields; track sf.Name) {\n                    <span class=\"rb-card-field\">\n                      <strong>{{ sf.DisplayName }}:</strong> {{ sf.Value }}\n                    </span>\n                  }\n                </div>\n              }\n              <div class=\"rb-card-meta\">\n                <i class=\"fa-solid fa-trash\" aria-hidden=\"true\"></i>\n                Deleted {{ formatTimestamp(entry.RecordChange.ChangedAt) }}\n                @if (entry.RecordChange.User) {\n                  by {{ getUserDisplay(entry.RecordChange.User) }}\n                }\n              </div>\n            </div>\n            <div class=\"rb-card-actions\">\n              <button class=\"rb-btn rb-btn-restore\"\n                [disabled]=\"!CanCreate\"\n                [title]=\"CanCreate ? 'Re-create this record from its snapshot' : 'You do not have Create permission for this entity'\"\n                (click)=\"OnRestoreClicked(entry)\"\n                type=\"button\">\n                <i class=\"fa-solid fa-rotate-left\" aria-hidden=\"true\"></i>\n                Restore\n              </button>\n            </div>\n          </div>\n        }\n      </div>\n    }\n\n  </div>\n\n  <!-- Restore preview slide-in (reused from ng-record-changes) -->\n  <mj-restore-preview-panel\n    [Visible]=\"PreviewVisible\"\n    [Mode]=\"'undelete'\"\n    [RecordChange]=\"SelectedEntry?.RecordChange ?? null\"\n    [EntityName]=\"EntityName\"\n    (RestoreConfirmed)=\"OnPreviewConfirmed($event)\"\n    (RestoreCancelled)=\"OnPreviewCancelled()\">\n  </mj-restore-preview-panel>\n\n</mj-slide-panel>\n", styles: ["/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n *  Recycle Bin\n *  Slide-in panel that lists hard-deleted records and offers re-create.\n *  All colors use --mj-* design tokens.\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.rb-container {\n  padding: 18px 20px;\n  display: flex;\n  flex-direction: column;\n  gap: 14px;\n}\n\n/* \u2500\u2500\u2500 Header \u2500\u2500\u2500 */\n\n.rb-header {\n  display: flex;\n  align-items: flex-start;\n  gap: 14px;\n  padding: 8px 0 14px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.rb-header-icon {\n  width: 40px;\n  height: 40px;\n  border-radius: 9px;\n  background: color-mix(in srgb, var(--mj-status-info) 12%, var(--mj-bg-surface));\n  color: var(--mj-status-info);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  font-size: 17px;\n}\n\n.rb-header-text { flex: 1; min-width: 0; }\n\n.rb-header-title {\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin-bottom: 2px;\n}\n\n.rb-header-subtitle {\n  color: var(--mj-text-muted);\n  font-size: 12px;\n}\n\n/* \u2500\u2500\u2500 State (denied / error / empty) \u2500\u2500\u2500 */\n\n.rb-state {\n  text-align: center;\n  padding: 50px 20px;\n  color: var(--mj-text-muted);\n}\n\n.rb-state i {\n  font-size: 36px;\n  margin-bottom: 12px;\n  display: block;\n}\n\n.rb-state h3 {\n  margin: 0 0 6px;\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.rb-state p {\n  margin: 0;\n  font-size: 13px;\n  max-width: 320px;\n  margin-left: auto;\n  margin-right: auto;\n}\n\n.rb-state-denied i { color: var(--mj-text-disabled); }\n.rb-state-error i  { color: var(--mj-status-error); }\n.rb-state-empty i  { color: var(--mj-text-disabled); }\n\n/* \u2500\u2500\u2500 List \u2500\u2500\u2500 */\n\n.rb-list {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n/* \u2500\u2500\u2500 Card \u2500\u2500\u2500 */\n\n.rb-card {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  padding: 14px;\n  display: grid;\n  grid-template-columns: 1fr auto;\n  gap: 14px;\n  align-items: center;\n  transition: border-color 0.15s;\n}\n\n.rb-card:hover {\n  border-color: var(--mj-border-strong);\n}\n\n.rb-card-info { min-width: 0; }\n\n.rb-card-name {\n  font-weight: 600;\n  font-size: 14px;\n  color: var(--mj-text-primary);\n  margin-bottom: 5px;\n  word-break: break-word;\n}\n\n.rb-card-fields {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 10px;\n  margin-bottom: 6px;\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n.rb-card-field strong {\n  color: var(--mj-text-secondary);\n  font-weight: 500;\n  margin-right: 3px;\n}\n\n.rb-card-meta {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  color: var(--mj-text-muted);\n  font-size: 11px;\n}\n\n.rb-card-meta i {\n  color: var(--mj-text-disabled);\n}\n\n/* \u2500\u2500\u2500 Card actions \u2500\u2500\u2500 */\n\n.rb-card-actions {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n.rb-btn {\n  padding: 7px 14px;\n  border-radius: 7px;\n  font-size: 12px;\n  font-weight: 600;\n  cursor: pointer;\n  border: 1px solid transparent;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-family: inherit;\n  background: var(--mj-bg-surface);\n  transition: background-color 0.1s, color 0.1s, border-color 0.1s;\n}\n\n.rb-btn-restore {\n  color: var(--mj-status-success);\n  border-color: var(--mj-status-success);\n}\n\n.rb-btn-restore:hover:not(:disabled) {\n  background: var(--mj-status-success);\n  color: var(--mj-text-inverse, #fff);\n}\n\n.rb-btn-restore:disabled {\n  color: var(--mj-text-disabled);\n  border-color: var(--mj-border-default);\n  background: var(--mj-bg-surface-sunken);\n  cursor: not-allowed;\n}\n"] }]
+    }], () => [{ type: i0.ChangeDetectorRef }], { Visible: [{
+            type: Input
+        }], EntityName: [{
+            type: Input
+        }], ContextUser: [{
+            type: Input
+        }], MaxRecords: [{
+            type: Input
+        }], Closed: [{
+            type: Output
+        }], BeforeRecycleBinOpen: [{
+            type: Output
+        }], AfterRecycleBinOpen: [{
+            type: Output
+        }], BeforeRecordRestore: [{
+            type: Output
+        }], AfterRecordRestore: [{
+            type: Output
+        }], BeforeRestoreCommit: [{
+            type: Output
+        }], AfterRestoreCommit: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RecycleBinComponent, { className: "RecycleBinComponent", filePath: "src/lib/recycle-bin/recycle-bin.component.ts", lineNumber: 93 }); })();
+//# sourceMappingURL=recycle-bin.component.js.map