@memberjunction/ng-list-management 5.34.1 → 5.36.0

package/README.md

@@ -1,6 +1,11 @@
 # @memberjunction/ng-list-management
 
-Angular components for managing entity list membership with a responsive dialog interface. Allows users to add and remove records from multiple lists with visual membership indicators.
+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`](../../../Lists/README.md) owns the underlying
+business logic.
 
 ## Installation
 
@@ -8,37 +13,7 @@ Angular components for managing entity list membership with a responsive dialog
 npm install @memberjunction/ng-list-management
 ```
 
-## Overview
-
-The List Management package provides a dialog-based UI for managing which lists a set of entity records belong to. It supports search and filtering, visual membership indicators (full/partial/none), inline list creation, batch operations with progress feedback, and list sharing via a separate sharing dialog.
-
-```mermaid
-flowchart TD
-    subgraph Dialog["List Management Dialog"]
-        A["Search & Filter"] --> B["List Items with Membership Indicators"]
-        B --> C["Toggle Membership"]
-        B --> D["Inline List Creation"]
-    end
-    subgraph Share["List Sharing Dialog"]
-        E["Share with Users/Roles"]
-    end
-    subgraph Services["Services"]
-        F["ListManagementService"]
-        G["ListSharingService"]
-    end
-
-    C --> F
-    D --> F
-    E --> G
-
-    style Dialog fill:#2d6a9f,stroke:#1a4971,color:#fff
-    style Share fill:#7c5295,stroke:#563a6b,color:#fff
-    style Services fill:#2d8659,stroke:#1a5c3a,color:#fff
-```
-
-## Usage
-
-### Module Import
+## Module import
 
 ```typescript
 import { ListManagementModule } from '@memberjunction/ng-list-management';
@@ -49,74 +24,193 @@ import { ListManagementModule } from '@memberjunction/ng-list-management';
 export class YourModule {}
 ```
 
-### List Management Dialog
+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).
+
+```html
+<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`).
 
 ```html
-<mj-list-management-dialog
-  [config]="listConfig"
-  [visible]="showListDialog"
-  (complete)="onListManagementComplete($event)"
-  (cancel)="onListManagementCancel()">
-</mj-list-management-dialog>
+<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>
 ```
 
-### List Sharing 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`.
 
 ```html
-<mj-list-share-dialog
-  [listId]="selectedListId"
-  [visible]="showShareDialog"
-  (closed)="onShareDialogClosed()">
-</mj-list-share-dialog>
+<mj-list-invitations
+  [Provider]="provider"
+  [ListID]="listId"
+  [ListName]="listName">
+</mj-list-invitations>
 ```
 
-### Configuration Example
+### `mj-list-audit-log`
 
-```typescript
-import { ListManagementDialogConfig } from '@memberjunction/ng-list-management';
-
-const listConfig: ListManagementDialogConfig = {
-  EntityName: 'Products',
-  RecordIDs: ['product-1', 'product-2', 'product-3'],
-  Title: 'Manage Product Lists',
-  AllowCreateList: true,
-  AllowShareList: true
-};
+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.
+
+```html
+<mj-list-audit-log
+  [Provider]="provider"
+  [ListID]="listId"
+  [PageSize]="200">
+</mj-list-audit-log>
 ```
 
-## Components
+### `mj-lists-shared-with-me`
 
-| Component | Selector | Purpose |
-|-----------|----------|---------|
-| `ListManagementDialogComponent` | `mj-list-management-dialog` | Dialog for adding/removing records to/from lists |
-| `ListShareDialogComponent` | `mj-list-share-dialog` | Dialog for sharing lists with users and roles |
+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.
+
+```html
+<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.
+
+```html
+<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.
+
+```html
+<!-- 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`).
+
+```html
+<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` | Business logic for list operations (add, remove, create, load) |
-| `ListSharingService` | Business logic for sharing lists with users and roles |
-
-## Exported Types
-
-- `ListManagementDialogConfig` -- Configuration for the list management dialog
-- `ListManagementResult` -- Result returned when dialog completes
-- `ListOperationDetail` -- Detail of a single add/remove operation
-- `ListItemViewModel` -- View model for a list item with membership state
-- `ListFilterTab` -- Filter tab type (`'all' | 'member' | 'not-member'`)
-- `ListSortOption` -- Sort option type (`'name' | 'date' | 'count'`)
-- `CreateListConfig` -- Configuration for inline list creation
-- `BatchOperationResult` -- Result of batch add/remove operations
-- `RecordMembershipInfo` -- Membership info for a record across lists
-- `ListShareConfig` -- Configuration for list sharing
-- `ListShareResult` -- Result of sharing operations
+| 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`](../../../Lists/README.md) — `ListOperations`,
+  `ListSharing`, `AudienceResolver`, delta-token contract.
+- [`@memberjunction/graphql-dataprovider`](../../../GraphQLDataProvider/README.md)
+  — `GraphQLListsClient` (typed client mirroring the `ListOperationsResolver`).
+- [`@memberjunction/core-actions`](../../../Actions/CoreActions/README.md)
+  — `MaterializeListFromView`, `ShareList`, `Compose Lists`, `Move List Members`,
+  `Resolve Audience`, etc. — every UI capability also available as an MJ Action.
 
 ## Dependencies
 
-- [@memberjunction/core](../../MJCore/README.md) -- Metadata, RunView
-- [@memberjunction/core-entities](../../MJCoreEntities/README.md) -- ListEntity, ListCategoryEntity
-- [@memberjunction/ng-shared-generic](../shared/README.md) -- Loading component
-- `@progress/kendo-angular-dialog` -- Dialog rendering
-- `@progress/kendo-angular-buttons` -- Button components
-- `@progress/kendo-angular-inputs` -- Input components
+- [@memberjunction/core](../../MJCore/README.md) — `Metadata`, `RunView`
+- [@memberjunction/core-entities](../../MJCoreEntities/README.md) — generated entity types
+- [@memberjunction/lists](../../../Lists/README.md) — `AudienceSource`, `ListDelta`, `SharePermissionLevel`, etc.
+- [@memberjunction/graphql-dataprovider](../../../GraphQLDataProvider/README.md) — `GraphQLListsClient`
+- [@memberjunction/ng-base-types](../base-types/README.md) — `BaseAngularComponent` for multi-provider support
+- [@memberjunction/ng-shared-generic](../shared/README.md) — loading component
+- [@memberjunction/ng-ui-components](../ui-components/README.md) — `mj-dialog`, `mjButton`, etc.

package/dist/lib/components/audience-source-picker/audience-source-picker.component.d.ts

@@ -0,0 +1,74 @@
+import { EventEmitter, OnInit } from '@angular/core';
+import { BaseAngularComponent } from '@memberjunction/ng-base-types';
+import { type EntityInfo } from '@memberjunction/core';
+import type { MJListEntity, MJUserViewEntity } from '@memberjunction/core-entities';
+import type { AudienceSource } from '@memberjunction/lists-base';
+import * as i0 from "@angular/core";
+/**
+ * Reusable picker for an `AudienceSource` (mockup 20). Three tabs:
+ *
+ *   - **List** — pick from saved `MJ: List`s for the chosen entity.
+ *   - **View** — pick from saved `MJ: User View`s for the chosen entity.
+ *     Marked "live" so the user knows the record set is re-resolved at
+ *     execution time.
+ *   - **Ad-hoc Filter** — entity + free-form `ExtraFilter`. Skips
+ *     server-side validation; the consumer can pre-flight via
+ *     `ResolveAudience` (Action) or `AudienceResolver.Resolve` if desired.
+ *
+ * Emits the typed `AudienceSource` via `SourceChange` on selection; the
+ * sister `AudienceSourceSummaryComponent` renders the friendly summary.
+ * Multi-provider safe via `BaseAngularComponent.ProviderToUse`.
+ */
+export type AudienceSourcePickerTab = 'list' | 'view' | 'adhoc';
+export declare class AudienceSourcePickerComponent extends BaseAngularComponent implements OnInit {
+    private readonly cdr;
+    /**
+     * Pre-seed the picker with an existing audience. Useful when editing
+     * a previously-configured audience on a saved campaign.
+     */
+    set Source(value: AudienceSource | null);
+    get Source(): AudienceSource | null;
+    private _source;
+    /** When set, restrict the entity dropdown to this entity (lock it). */
+    LockedEntityName: string | null;
+    SourceChange: EventEmitter<import("@memberjunction/lists-base").ListSource | null>;
+    activeTab: AudienceSourcePickerTab;
+    entityOptions: EntityInfo[];
+    selectedEntityName: string | null;
+    availableLists: MJListEntity[];
+    filteredLists: MJListEntity[];
+    listSearch: string;
+    selectedListId: string | null;
+    availableViews: MJUserViewEntity[];
+    filteredViews: MJUserViewEntity[];
+    viewSearch: string;
+    selectedViewId: string | null;
+    adhocEntityName: string | null;
+    adhocFilter: string;
+    loading: boolean;
+    ngOnInit(): Promise<void>;
+    setTab(tab: AudienceSourcePickerTab): Promise<void>;
+    OnEntityChange(name: string): Promise<void>;
+    OnListSearchChange(): void;
+    OnViewSearchChange(): void;
+    OnSelectList(list: MJListEntity): void;
+    OnSelectView(view: MJUserViewEntity): void;
+    OnAdhocFilterChange(): void;
+    /**
+     * Build the currently-selected `AudienceSource` from picker state, or
+     * `null` if the picker isn't yet in a complete state.
+     */
+    get currentSource(): AudienceSource | null;
+    private emitCurrentSource;
+    /**
+     * Pull lists or views for the current tab from the server. We
+     * intentionally batch the (list, view) pair on entity change so
+     * switching tabs doesn't re-query.
+     */
+    private refreshTabData;
+    private recomputeFilteredLists;
+    private recomputeFilteredViews;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AudienceSourcePickerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AudienceSourcePickerComponent, "mj-audience-source-picker", never, { "Source": { "alias": "Source"; "required": false; }; "LockedEntityName": { "alias": "LockedEntityName"; "required": false; }; }, { "SourceChange": "SourceChange"; }, never, never, false, never>;
+}
+//# sourceMappingURL=audience-source-picker.component.d.ts.map

package/dist/lib/components/audience-source-picker/audience-source-picker.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"audience-source-picker.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/audience-source-picker/audience-source-picker.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyD,YAAY,EAAS,MAAM,EAAkB,MAAM,eAAe,CAAC;AAEnI,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AACrE,OAAO,EAAW,KAAK,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAChE,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACpF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;;AAEjE;;;;;;;;;;;;;;GAcG;AACH,MAAM,MAAM,uBAAuB,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;AAEhE,qBAOa,6BAA8B,SAAQ,oBAAqB,YAAW,MAAM;IACvF,OAAO,CAAC,QAAQ,CAAC,GAAG,CAA6B;IAEjD;;;OAGG;IACH,IACI,MAAM,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI,EActC;IACD,IAAI,MAAM,IAAI,cAAc,GAAG,IAAI,CAElC;IACD,OAAO,CAAC,OAAO,CAA+B;IAE9C,uEAAuE;IAC9D,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAQ;IAEtC,YAAY,uEAA6C;IAE5D,SAAS,EAAE,uBAAuB,CAAU;IAC5C,aAAa,EAAE,UAAU,EAAE,CAAM;IAGjC,kBAAkB,EAAE,MAAM,GAAG,IAAI,CAAQ;IACzC,cAAc,EAAE,YAAY,EAAE,CAAM;IACpC,aAAa,EAAE,YAAY,EAAE,CAAM;IACnC,UAAU,SAAM;IAChB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAQ;IAGrC,cAAc,EAAE,gBAAgB,EAAE,CAAM;IACxC,aAAa,EAAE,gBAAgB,EAAE,CAAM;IACvC,UAAU,SAAM;IAChB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAQ;IAGrC,eAAe,EAAE,MAAM,GAAG,IAAI,CAAQ;IACtC,WAAW,SAAM;IAEjB,OAAO,UAAS;IAEjB,QAAQ,IAAI,OAAO,CAAC,IAAI,CAAC;IAclB,MAAM,CAAC,GAAG,EAAE,uBAAuB,GAAG,OAAO,CAAC,IAAI,CAAC;IAMnD,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAUjD,kBAAkB,IAAI,IAAI;IAI1B,kBAAkB,IAAI,IAAI;IAI1B,YAAY,CAAC,IAAI,EAAE,YAAY,GAAG,IAAI;IAKtC,YAAY,CAAC,IAAI,EAAE,gBAAgB,GAAG,IAAI;IAK1C,mBAAmB,IAAI,IAAI;IAIlC;;;OAGG;IACH,IAAW,aAAa,IAAI,cAAc,GAAG,IAAI,CAYhD;IAED,OAAO,CAAC,iBAAiB;IAMzB;;;;OAIG;YACW,cAAc;IAsC5B,OAAO,CAAC,sBAAsB;IAQ9B,OAAO,CAAC,sBAAsB;yCAtLnB,6BAA6B;2CAA7B,6BAA6B;CA6LzC"}