@gayath1/ng-avatar-creator 1.0.0 → 1.0.1

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.
Files changed (2) hide show
  1. package/README.md +101 -13
  2. package/package.json +23 -1
package/README.md CHANGED
@@ -1,24 +1,112 @@
1
- # NgAvatarCreator
1
+ # @gayath1/ng-avatar-creator
2
2
 
3
- This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 15.0.0.
3
+ Angular library that renders **deterministic SVG avatars** from a name seed. Includes optional inline customization (style, color, shape) when `editable` is enabled.
4
4
 
5
- ## Code scaffolding
5
+ **Requirements:** Angular `^15`.
6
6
 
7
- Run `ng generate component component-name --project ng-avatar-creator` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ng-avatar-creator`.
8
- > Note: Don't forget to add `--project ng-avatar-creator` or else it will be added to the default project in your `angular.json` file.
7
+ ## Install
9
8
 
10
- ## Build
9
+ ```bash
10
+ npm install @gayath1/ng-avatar-creator
11
+ ```
11
12
 
12
- Run `ng build ng-avatar-creator` to build the project. The build artifacts will be stored in the `dist/` directory.
13
+ Peer dependencies (your app should already have these):
13
14
 
14
- ## Publishing
15
+ - `@angular/common` `^15.0.0`
16
+ - `@angular/core` `^15.0.0`
15
17
 
16
- After building your library with `ng build ng-avatar-creator`, go to the dist folder `cd dist/ng-avatar-creator` and run `npm publish`.
18
+ ## Usage
17
19
 
18
- ## Running unit tests
20
+ Import the module in a feature or root module:
19
21
 
20
- Run `ng test ng-avatar-creator` to execute the unit tests via [Karma](https://karma-runner.github.io).
22
+ ```typescript
23
+ import { NgAvatarCreatorModule } from '@gayath1/ng-avatar-creator';
21
24
 
22
- ## Further help
25
+ @NgModule({
26
+ imports: [NgAvatarCreatorModule],
27
+ })
28
+ export class AppModule {}
29
+ ```
23
30
 
24
- To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
31
+ Use the component in a template:
32
+
33
+ ```html
34
+ <lib-ng-avatar-creator
35
+ [firstName]="'Ada'"
36
+ [lastName]="'Lovelace'"
37
+ [size]="80"
38
+ [editable]="true"
39
+ editorTitle="Edit avatar"
40
+ [avatarConfig]="config"
41
+ (avatarConfigChanged)="onAvatarChange($event)"
42
+ ></lib-ng-avatar-creator>
43
+ ```
44
+
45
+ ```typescript
46
+ import { AvatarConfig } from '@gayath1/ng-avatar-creator';
47
+
48
+ config: AvatarConfig = {
49
+ style: 'initials',
50
+ seed: 'Ada Lovelace',
51
+ bgColor: '#3b82f6',
52
+ shape: 'circle',
53
+ };
54
+
55
+ onAvatarChange(config: AvatarConfig) {
56
+ this.config = { ...config };
57
+ }
58
+ ```
59
+
60
+ ### Inputs
61
+
62
+ | Input | Type | Default | Description |
63
+ |--------|------|---------|-------------|
64
+ | `firstName` | `string` | `''` | Used with `lastName` to derive the default seed when `avatarConfig` is not set. |
65
+ | `lastName` | `string` | `''` | Same as `firstName`. |
66
+ | `size` | `number` | `64` | Display size of the avatar (pixels). |
67
+ | `editable` | `boolean` | `false` | When `true`, users can open an editor to change style, color, and shape. |
68
+ | `editorTitle` | `string` | `'Customize Avatar'` | Title shown in the editor UI. |
69
+ | `avatarConfig` | `AvatarConfig` | *(optional)* | Full configuration; merges with internal defaults. |
70
+
71
+ ### Outputs
72
+
73
+ | Output | Type | Description |
74
+ |--------|------|-------------|
75
+ | `avatarConfigChanged` | `EventEmitter<AvatarConfig>` | Emits whenever the effective config changes (including on init). |
76
+
77
+ ### `AvatarConfig`
78
+
79
+ ```typescript
80
+ interface AvatarConfig {
81
+ style: AvatarStyleId;
82
+ seed: string;
83
+ bgColor: string;
84
+ shape: 'circle' | 'square';
85
+ }
86
+ ```
87
+
88
+ **`AvatarStyleId`:** `initials`, `identicon`, `rings`, `shapes`, `thumbs`, `avataaars`, `bottts`, `glass`.
89
+
90
+ Constants **`AVATAR_STYLES`** and **`PREDEFINED_COLORS`** are exported if you want to build your own UI.
91
+
92
+ ### Selector
93
+
94
+ - **Selector:** `lib-ng-avatar-creator`
95
+
96
+ Avatars are generated as inline **SVG** (data URLs); no external image host is required.
97
+
98
+ ## Public API
99
+
100
+ - `NgAvatarCreatorModule`
101
+ - `NgAvatarCreatorComponent`
102
+ - `NgAvatarCreatorService` (placeholder for future extension)
103
+ - `AvatarConfig`, `AvatarStyleId`, `AvatarStyleOption`
104
+ - `AVATAR_STYLES`, `PREDEFINED_COLORS`
105
+
106
+ ## Repository
107
+
108
+ Source and issues: [github.com/gayathchandula/ng-avatar](https://github.com/gayathchandula/ng-avatar)
109
+
110
+ ## License
111
+
112
+ MIT
package/package.json CHANGED
@@ -1,6 +1,28 @@
1
1
  {
2
2
  "name": "@gayath1/ng-avatar-creator",
3
- "version": "1.0.0",
3
+ "version": "1.0.1",
4
+ "description": "Angular 15 library for deterministic SVG avatars with optional inline editor (style, color, shape).",
5
+ "keywords": [
6
+ "angular",
7
+ "angular15",
8
+ "avatar",
9
+ "svg",
10
+ "ngx",
11
+ "identicon",
12
+ "profile",
13
+ "ui"
14
+ ],
15
+ "author": "gayath1",
16
+ "license": "MIT",
17
+ "repository": {
18
+ "type": "git",
19
+ "url": "https://github.com/gayathchandula/ng-avatar.git",
20
+ "directory": "projects/ng-avatar-creator"
21
+ },
22
+ "bugs": {
23
+ "url": "https://github.com/gayathchandula/ng-avatar/issues"
24
+ },
25
+ "homepage": "https://github.com/gayathchandula/ng-avatar#readme",
4
26
  "peerDependencies": {
5
27
  "@angular/common": "^15.0.0",
6
28
  "@angular/core": "^15.0.0"