@memberjunction/ng-list-management

Angular components for the MemberJunction Lists feature: list-membership management, sharing, refresh-from-source preview, audience picking, tagging, and lightweight stats. Drop-in pieces that any MJ app can use; the components here own the UI shape, and @memberjunction/lists owns the underlying business logic.

Installation

npm install @memberjunction/ng-list-management

Module import

import { ListManagementModule } from '@memberjunction/ng-list-management';

@NgModule({
  imports: [ListManagementModule]
})
export class YourModule {}

All components below are exported via this single module.

Components

| Selector | Component | Purpose | | ------------------------------ | ------------------------------------ | ------------------------------------------------------------------------------------------- | | mj-list-management-dialog | ListManagementDialogComponent | Dialog for adding/removing records to/from lists | | mj-list-share-dialog | ListShareDialogComponent | Share-with-users-or-roles dialog (audit-log + notification footer links) | | mj-list-delta-confirm | ListDeltaConfirmComponent | Preview-and-confirm dialog for any mutating list op (drop-guard UX) | | mj-save-view-as-list-dialog | SaveViewAsListDialogComponent | Materialize a User View into a new static List (with optional lineage + filter snapshot) | | mj-list-invitations | ListInvitationsComponent | Per-list invitations management — Pending / Accepted / Expired / Revoked tabs + send form | | mj-list-audit-log | ListAuditLogComponent | Per-list audit-log viewer reading the generic MJ: Audit Logs table | | mj-lists-shared-with-me | ListsSharedWithMeComponent | Browse-style grid of all lists shared with the current user | | mj-list-stats | ListStatsComponent | Side-panel usage stats (members, monthly growth, active shares, recent-activity feed) | | mj-tag-chips | TagChipsComponent | Compact tag chips for any entity record (read-only + editable variants) | | mj-audience-source-picker | AudienceSourcePickerComponent | Three-tab audience picker — List / View / Ad-hoc Filter — emits typed AudienceSource | | mj-audience-source-summary | AudienceSourceSummaryComponent | Compact friendly-name summary of a selected AudienceSource |

Component reference

mj-list-delta-confirm

The only UI path that emits a valid DeltaToken to apply a list mutation. Two visual states — safe (green) and drop-warning (red with a required acknowledgement checkbox).

<mj-list-delta-confirm
  [Visible]="confirmVisible && !!delta"
  [Delta]="delta"
  [TargetListName]="listName"
  [SourceLabel]="sourceName"
  (Confirm)="onConfirm($event)"
  (Cancel)="onCancel()">
</mj-list-delta-confirm>

(Confirm) emits the DeltaToken string; pass it back to GraphQLListsClient.ApplyListDelta({ Delta, ConfirmDrops }).

mj-save-view-as-list-dialog

Materializes a User View into a new List. Surfaces the lineage options (one-time snapshot vs. remember source view) and the freeze-filter toggle (UseSnapshot).

<mj-save-view-as-list-dialog
  [Provider]="provider"
  [Visible]="dialogVisible"
  [ViewId]="viewId"
  [ViewName]="viewName"
  [RecordCount]="viewRowCount"
  (Save)="onSaveAsList($event)"
  (Cancel)="onCancel()">
</mj-save-view-as-list-dialog>

(Save) emits a SaveViewAsListResult — caller invokes GraphQLListsClient.MaterializeFromView(viewId, opts).

mj-list-invitations

Full invitations management for one list. Drives the Invite / RevokeInvitation / "Resend" flows from ListSharing.

<mj-list-invitations
  [Provider]="provider"
  [ListID]="listId"
  [ListName]="listName">
</mj-list-invitations>

mj-list-audit-log

Per-list audit log viewer. Reads from MJ: Audit Logs filtered to the List entity + this list's ID. Joins users + audit-log-types in a single batch query so the table renders names, not UUIDs.

<mj-list-audit-log
  [Provider]="provider"
  [ListID]="listId"
  [PageSize]="200">
</mj-list-audit-log>

mj-lists-shared-with-me

Browse-style grid for lists shared with the current user. Click events bubble up via OpenList so the host app can route through its own navigation.

<mj-lists-shared-with-me
  [Provider]="provider"
  (OpenList)="onOpenList($event.ListID)">
</mj-lists-shared-with-me>

mj-list-stats

Compact side panel for a list detail view. Surfaces member count, this-month growth, active share count, time-since-last-activity, and a recent-activity feed pulled from the audit log.

<mj-list-stats [Provider]="provider" [ListID]="listId"></mj-list-stats>

mj-tag-chips

Compact, reusable tag chips for any entity record. Backed by MJ: Tagged Items. Read-only by default; passing [Editable]="true" shows an inline autocomplete add field and per-chip remove buttons.

<!-- Read-only chips on a card -->
<mj-tag-chips
  [Provider]="provider"
  EntityName="MJ: Lists"
  [RecordID]="listId"
  [MaxDisplay]="3"
  (TagClicked)="onFilterByTag($event)">
</mj-tag-chips>

<!-- Editable chips on a detail view -->
<mj-tag-chips
  [Provider]="provider"
  EntityName="MJ: Lists"
  [RecordID]="listId"
  [Editable]="true"
  [MaxDisplay]="20">
</mj-tag-chips>

mj-audience-source-picker + mj-audience-source-summary

Reusable audience picker for Communications and any other audience-aware feature. Emits a typed AudienceSource discriminated union (same shape as ListSource from @memberjunction/lists).

<mj-audience-source-picker
  [Provider]="provider"
  [LockedEntityName]="entityName"
  [Source]="currentSource"
  (SourceChange)="audience = $event">
</mj-audience-source-picker>

<mj-audience-source-summary
  [Provider]="provider"
  [Source]="audience"
  [RecordCount]="resolvedCount">
</mj-audience-source-summary>

Three tabs: List (pick a saved MJ: List), View (pick a MJ: User View, marked "live"), Ad-hoc Filter (entity + free-form ExtraFilter).

Services

| Service | Purpose | | --------------------- | -------------------------------------------------------------------- | | ListManagementService | Add/remove/create list operations from the management dialog | | ListSharingService | Direct share writes from the share dialog (Phase 1 path; new code prefer the server-side ListSharing via GraphQLListsClient) |

Companion packages

For the underlying business logic and the wire-format client:

• @memberjunction/lists — ListOperations, ListSharing, AudienceResolver, delta-token contract.
• @memberjunction/graphql-dataprovider — GraphQLListsClient (typed client mirroring the ListOperationsResolver).
• @memberjunction/core-actions — MaterializeListFromView, ShareList, Compose Lists, Move List Members, Resolve Audience, etc. — every UI capability also available as an MJ Action.

Dependencies

• @memberjunction/core — Metadata, RunView
• @memberjunction/core-entities — generated entity types
• @memberjunction/lists — AudienceSource, ListDelta, SharePermissionLevel, etc.
• @memberjunction/graphql-dataprovider — GraphQLListsClient
• @memberjunction/ng-base-types — BaseAngularComponent for multi-provider support
• @memberjunction/ng-shared-generic — loading component
• @memberjunction/ng-ui-components — mj-dialog, mjButton, etc.