@memberjunction/ng-action-gallery 4.0.0 → 4.2.0

package/README.md

@@ -1,21 +1,35 @@
 # @memberjunction/ng-action-gallery
 
-A beautiful, filterable gallery component for browsing and selecting actions in MemberJunction applications.
+A filterable gallery component for browsing and selecting MemberJunction actions, with grid and list views, category navigation, search, and dialog integration.
 
 ## Overview
 
-The Action Gallery provides an exceptional user experience for discovering, browsing, and selecting actions. It features both grid and list views, category navigation, and powerful search capabilities.
+The Action Gallery provides a rich interface for discovering, browsing, and selecting actions. It features both grid and list view modes, hierarchical category navigation with counts, real-time search filtering, and single or multi-selection support. The gallery integrates with the AI Test Harness for quick action testing.
 
-## Features
+```mermaid
+graph TD
+    A[ActionGalleryModule] --> B[ActionGalleryComponent]
+    A --> C[ActionGalleryDialogService]
+
+    B --> D[Category Tree Panel]
+    B --> E[Grid / List View]
+    B --> F[Search & Filter]
+
+    C --> G[Single Selection Dialog]
+    C --> H[Multi-Selection Dialog]
+    C --> I[Browse-Only Dialog]
 
-- 🎨 Beautiful grid and list view modes
-- 🌳 Hierarchical category navigation with counts
-- 🔍 Real-time search filtering
-- ✅ Single and multi-selection support
-- 📇 Expandable action cards with details
-- ⚡ Quick test integration
-- 🎯 TypeScript support with full type safety
-- 🌓 Light and dark theme support
+    E --> J["Action Cards
+    (expandable details)"]
+    J --> K[Parameters Display]
+    J --> L[Result Codes Display]
+    J --> M[Quick Test Button]
+
+    style A fill:#2d6a9f,stroke:#1a4971,color:#fff
+    style B fill:#7c5295,stroke:#563a6b,color:#fff
+    style C fill:#2d8659,stroke:#1a5c3a,color:#fff
+    style E fill:#b8762f,stroke:#8a5722,color:#fff
+```
 
 ## Installation
 
@@ -31,20 +45,15 @@ npm install @memberjunction/ng-action-gallery
 import { ActionGalleryModule } from '@memberjunction/ng-action-gallery';
 
 @NgModule({
-  imports: [
-    ActionGalleryModule,
-    // ... other imports
-  ]
+  imports: [ActionGalleryModule]
 })
 export class YourModule { }
 ```
 
-### Component Usage
-
-#### Standalone Gallery
+### Standalone Gallery
 
 ```html
-<mj-action-gallery 
+<mj-action-gallery
   [config]="galleryConfig"
   [preSelectedActions]="selectedIds"
   (actionSelected)="onActionSelected($event)"
@@ -64,19 +73,9 @@ galleryConfig: ActionGalleryConfig = {
   enableQuickTest: true,
   theme: 'light'
 };
-
-selectedIds = ['action-id-1', 'action-id-2'];
-
-onActionSelected(action: ActionEntity) {
-  console.log('Selected action:', action);
-}
-
-onActionsSelected(actions: ActionEntity[]) {
-  console.log('Selected actions:', actions);
-}
 ```
 
-#### Dialog Mode
+### Dialog Mode
 
 ```typescript
 import { ActionGalleryDialogService } from '@memberjunction/ng-action-gallery';
@@ -101,7 +100,6 @@ selectMultipleActions() {
   this.actionGallery.openForMultiSelection({
     title: 'Select Actions',
     preSelectedActions: ['id1', 'id2'],
-    showCategories: true,
     submitButtonText: 'Add Selected Actions'
   }).subscribe(actions => {
     console.log('Selected actions:', actions);
@@ -123,14 +121,14 @@ browseActions() {
 
 | Property | Type | Default | Description |
 |----------|------|---------|-------------|
-| selectionMode | `boolean` | `false` | Enable selection mode |
-| multiSelect | `boolean` | `false` | Allow multiple selections |
-| showCategories | `boolean` | `true` | Show category sidebar |
-| showSearch | `boolean` | `true` | Show search bar |
-| defaultView | `'grid' \| 'list'` | `'grid'` | Default view mode |
-| gridColumns | `number` | `3` | Number of grid columns |
-| enableQuickTest | `boolean` | `true` | Show test buttons |
-| theme | `'light' \| 'dark'` | `'light'` | Visual theme |
+| `selectionMode` | `boolean` | `false` | Enable selection mode |
+| `multiSelect` | `boolean` | `false` | Allow multiple selections |
+| `showCategories` | `boolean` | `true` | Show category sidebar |
+| `showSearch` | `boolean` | `true` | Show search bar |
+| `defaultView` | `'grid' \| 'list'` | `'grid'` | Default view mode |
+| `gridColumns` | `number` | `3` | Number of grid columns |
+| `enableQuickTest` | `boolean` | `true` | Show test buttons |
+| `theme` | `'light' \| 'dark'` | `'light'` | Visual theme |
 
 ### ActionGalleryDialogConfig
 
@@ -138,70 +136,43 @@ Extends `ActionGalleryConfig` with:
 
 | Property | Type | Default | Description |
 |----------|------|---------|-------------|
-| title | `string` | `'Select Actions'` | Dialog title |
-| width | `number` | `1200` | Dialog width |
-| height | `number` | `800` | Dialog height |
-| submitButtonText | `string` | `'Select'` | Submit button text |
-| cancelButtonText | `string` | `'Cancel'` | Cancel button text |
-| preSelectedActions | `string[]` | `[]` | Pre-selected action IDs |
+| `title` | `string` | `'Select Actions'` | Dialog title |
+| `width` | `number` | `1200` | Dialog width |
+| `height` | `number` | `800` | Dialog height |
+| `submitButtonText` | `string` | `'Select'` | Submit button text |
+| `cancelButtonText` | `string` | `'Cancel'` | Cancel button text |
+| `preSelectedActions` | `string[]` | `[]` | Pre-selected action IDs |
 
-## Features in Detail
+## Features
 
 ### Category Navigation
 
-The gallery displays a hierarchical category tree on the left side:
-- Shows action counts per category
-- Supports nested categories
+- Hierarchical category tree with action counts per category
 - Collapsible/expandable nodes
 - "All Actions" and "Uncategorized" special categories
 
 ### Action Cards
 
-Each action is displayed as an expandable card showing:
-- Action name and icon
-- Category badge
-- Description
+Each action displays as an expandable card showing:
+- Action name and icon with category badge
+- Description text
 - Quick test button (if enabled)
-- Expanded details:
-  - Parameters with types and required status
-  - Result codes with descriptions
+- Expanded details with parameters (types and required status) and result codes
 
 ### Search and Filtering
 
-Real-time search across:
-- Action names
-- Descriptions
-- Categories
+Real-time search across action names, descriptions, and categories.
 
 ### View Modes
 
-**Grid View**: Visual cards in a responsive grid layout
-**List View**: Compact table format for scanning many actions
-
-## Styling
-
-The component uses CSS custom properties for theming:
-
-```scss
-:root {
-  --gallery-primary: #007bff;
-  --gallery-hover: #0056b3;
-  --gallery-selected: #e3f2fd;
-  --gallery-background: #ffffff;
-  --gallery-text: #212529;
-  --gallery-border: #dee2e6;
-}
-```
+- **Grid View**: Visual cards in a responsive grid layout
+- **List View**: Compact table format for scanning many actions
 
 ## Integration with AI Test Harness
 
-The Action Gallery integrates seamlessly with the AI Test Harness:
-
 ```typescript
-// In gallery configuration
 enableQuickTest: true
 
-// Handle test requests
 onTestRequested(action: ActionEntity) {
   this.testHarness.openForAction(action.ID).subscribe(result => {
     console.log('Test result:', result);
@@ -209,29 +180,44 @@ onTestRequested(action: ActionEntity) {
 }
 ```
 
-## Performance
+## CSS Customization
 
-- Lazy loads action details on expansion
-- Debounced search for smooth filtering
-- Virtual scrolling ready for large datasets
-- Efficient category tree rendering
+```scss
+:root {
+  --gallery-primary: #007bff;
+  --gallery-hover: #0056b3;
+  --gallery-selected: #e3f2fd;
+  --gallery-background: #ffffff;
+  --gallery-text: #212529;
+  --gallery-border: #dee2e6;
+}
+```
 
 ## Dependencies
 
-- Angular 21+
-- @memberjunction/core
-- @memberjunction/core-entities
-- @memberjunction/ng-ai-test-harness
-- Kendo UI for Angular
+| Package | Description |
+|---------|-------------|
+| `@memberjunction/core` | Core framework |
+| `@memberjunction/core-entities` | Entity type definitions |
+| `@memberjunction/ng-ai-test-harness` | AI test harness integration |
+| `@memberjunction/ng-container-directives` | Layout directives |
+| `@memberjunction/ng-shared-generic` | Shared generic components |
+| `@progress/kendo-angular-*` | Kendo UI components |
 
-## License
+### Peer Dependencies
 
-ISC
+- `@angular/common` ^21.x
+- `@angular/core` ^21.x
+- `@angular/forms` ^21.x
+- `@angular/animations` ^21.x
 
-## Contributing
+## Build
 
-Contributions are welcome! Please submit pull requests to the MemberJunction repository.
+```bash
+cd packages/Angular/Generic/action-gallery
+npm run build
+```
 
-## Support
+## License
 
-For issues and questions, please use the MemberJunction GitHub repository.
+ISC

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@memberjunction/ng-action-gallery",
-  "version": "4.0.0",
+  "version": "4.2.0",
   "description": "MemberJunction Action Gallery - A beautiful, filterable gallery component for browsing and selecting actions",
   "main": "./dist/public-api.js",
   "typings": "./dist/public-api.d.ts",
@@ -31,11 +31,11 @@
     "@angular/animations": "21.1.3"
   },
   "dependencies": {
-    "@memberjunction/core": "4.0.0",
-    "@memberjunction/core-entities": "4.0.0",
-    "@memberjunction/ng-ai-test-harness": "4.0.0",
-    "@memberjunction/ng-container-directives": "4.0.0",
-    "@memberjunction/ng-shared-generic": "4.0.0",
+    "@memberjunction/core": "4.2.0",
+    "@memberjunction/core-entities": "4.2.0",
+    "@memberjunction/ng-ai-test-harness": "4.2.0",
+    "@memberjunction/ng-container-directives": "4.2.0",
+    "@memberjunction/ng-shared-generic": "4.2.0",
     "@progress/kendo-angular-buttons": "22.0.1",
     "@progress/kendo-angular-dialog": "22.0.1",
     "@progress/kendo-angular-dropdowns": "22.0.1",