@memberjunction/ng-shared-generic 4.0.0 → 4.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +117 -0
- package/package.json +3 -3
package/README.md
ADDED
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
# @memberjunction/ng-shared-generic
|
|
2
|
+
|
|
3
|
+
Generic Angular shared utilities and components used across all MemberJunction Angular applications. Provides the standard `<mj-loading>` component and the `RecentAccessService` for tracking recently viewed resources.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @memberjunction/ng-shared-generic
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Overview
|
|
12
|
+
|
|
13
|
+
This package contains foundational UI elements and services that are used by many other MemberJunction Angular packages. Its primary exports are the animated MJ Loading component (the standard loading indicator across all MJ applications) and the RecentAccessService singleton.
|
|
14
|
+
|
|
15
|
+
```mermaid
|
|
16
|
+
flowchart TD
|
|
17
|
+
subgraph Module["SharedGenericModule"]
|
|
18
|
+
A["LoadingComponent (mj-loading)"]
|
|
19
|
+
B["RecentAccessService"]
|
|
20
|
+
end
|
|
21
|
+
subgraph Consumers["Used By"]
|
|
22
|
+
C["ng-query-viewer"]
|
|
23
|
+
D["ng-explorer-core"]
|
|
24
|
+
E["ng-skip-chat"]
|
|
25
|
+
F["ng-versions"]
|
|
26
|
+
G["All MJ Angular apps"]
|
|
27
|
+
end
|
|
28
|
+
|
|
29
|
+
Module --> Consumers
|
|
30
|
+
|
|
31
|
+
style Module fill:#2d6a9f,stroke:#1a4971,color:#fff
|
|
32
|
+
style Consumers fill:#2d8659,stroke:#1a5c3a,color:#fff
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
## Usage
|
|
36
|
+
|
|
37
|
+
### Module Import
|
|
38
|
+
|
|
39
|
+
```typescript
|
|
40
|
+
import { SharedGenericModule } from '@memberjunction/ng-shared-generic';
|
|
41
|
+
|
|
42
|
+
@NgModule({
|
|
43
|
+
imports: [SharedGenericModule]
|
|
44
|
+
})
|
|
45
|
+
export class YourModule {}
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
### Loading Component
|
|
49
|
+
|
|
50
|
+
The `<mj-loading>` component displays the animated MJ logo with optional text. It is the **standard loading indicator** for all MemberJunction applications.
|
|
51
|
+
|
|
52
|
+
```html
|
|
53
|
+
<!-- Basic usage -->
|
|
54
|
+
<mj-loading></mj-loading>
|
|
55
|
+
|
|
56
|
+
<!-- With custom text -->
|
|
57
|
+
<mj-loading text="Loading records..."></mj-loading>
|
|
58
|
+
|
|
59
|
+
<!-- Size presets -->
|
|
60
|
+
<mj-loading text="Please wait..." size="medium"></mj-loading>
|
|
61
|
+
|
|
62
|
+
<!-- No text, just logo animation -->
|
|
63
|
+
<mj-loading [showText]="false"></mj-loading>
|
|
64
|
+
|
|
65
|
+
<!-- Custom animation style -->
|
|
66
|
+
<mj-loading animation="spin"></mj-loading>
|
|
67
|
+
|
|
68
|
+
<!-- With gradient colors -->
|
|
69
|
+
<mj-loading [logoGradient]="{startColor: '#228B22', endColor: '#C41E3A'}"></mj-loading>
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
#### LoadingComponent Inputs
|
|
73
|
+
|
|
74
|
+
| Property | Type | Default | Description |
|
|
75
|
+
|----------|------|---------|-------------|
|
|
76
|
+
| `text` | `string` | `'Loading...'` | Text displayed below the animation |
|
|
77
|
+
| `showText` | `boolean` | `true` | Whether to show the text |
|
|
78
|
+
| `animationDuration` | `number` | `1.5` | Animation duration in seconds |
|
|
79
|
+
| `size` | `'small' \| 'medium' \| 'large' \| 'auto'` | `'medium'` | Size preset |
|
|
80
|
+
| `textColor` | `string` | `'#666666'` | Text color |
|
|
81
|
+
| `logoColor` | `string` | `'#1a73e8'` | Logo fill color |
|
|
82
|
+
| `logoGradient` | `LogoGradient` | `undefined` | Gradient fill (overrides `logoColor`) |
|
|
83
|
+
| `animation` | `'pulse' \| 'spin' \| 'bounce'` | `'pulse'` | Animation style |
|
|
84
|
+
|
|
85
|
+
#### LogoGradient Interface
|
|
86
|
+
|
|
87
|
+
```typescript
|
|
88
|
+
interface LogoGradient {
|
|
89
|
+
startColor: string;
|
|
90
|
+
endColor: string;
|
|
91
|
+
angle?: number; // default: 45
|
|
92
|
+
}
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
### RecentAccessService
|
|
96
|
+
|
|
97
|
+
A singleton service that tracks recently accessed resources (entities, records) for quick navigation.
|
|
98
|
+
|
|
99
|
+
```typescript
|
|
100
|
+
import { RecentAccessService } from '@memberjunction/ng-shared-generic';
|
|
101
|
+
|
|
102
|
+
// Track a resource access
|
|
103
|
+
RecentAccessService.Instance.TrackAccess({
|
|
104
|
+
EntityName: 'Products',
|
|
105
|
+
RecordID: 'product-123',
|
|
106
|
+
DisplayName: 'Conference Pass',
|
|
107
|
+
Timestamp: new Date()
|
|
108
|
+
});
|
|
109
|
+
|
|
110
|
+
// Get recent items
|
|
111
|
+
const recentItems = RecentAccessService.Instance.RecentItems;
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
## Dependencies
|
|
115
|
+
|
|
116
|
+
- [@memberjunction/core](../../MJCore/README.md) -- Core MJ framework
|
|
117
|
+
- [@memberjunction/core-entities](../../MJCoreEntities/README.md) -- Entity types
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@memberjunction/ng-shared-generic",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.1.0",
|
|
4
4
|
"description": "MemberJunction: Generic Angular Shared Package - utility services and reusable elements used in any Angular application.",
|
|
5
5
|
"main": "./dist/public-api.js",
|
|
6
6
|
"typings": "./dist/public-api.d.ts",
|
|
@@ -27,8 +27,8 @@
|
|
|
27
27
|
"rxjs": "^7.8.2"
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@memberjunction/core": "4.
|
|
31
|
-
"@memberjunction/core-entities": "4.
|
|
30
|
+
"@memberjunction/core": "4.1.0",
|
|
31
|
+
"@memberjunction/core-entities": "4.1.0",
|
|
32
32
|
"tslib": "^2.8.1"
|
|
33
33
|
},
|
|
34
34
|
"sideEffects": false,
|