ng-hub-ui-avatar 19.0.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.
Files changed (30) hide show
  1. package/README.md +170 -0
  2. package/fesm2022/ng-hub-ui-avatar.mjs +891 -0
  3. package/fesm2022/ng-hub-ui-avatar.mjs.map +1 -0
  4. package/index.d.ts +5 -0
  5. package/lib/avatar-config.d.ts +18 -0
  6. package/lib/avatar-config.service.d.ts +12 -0
  7. package/lib/avatar-config.token.d.ts +6 -0
  8. package/lib/avatar.component.d.ts +114 -0
  9. package/lib/avatar.module.d.ts +11 -0
  10. package/lib/avatar.service.d.ts +43 -0
  11. package/lib/sources/async-source.d.ts +13 -0
  12. package/lib/sources/avatar-source.enum.d.ts +13 -0
  13. package/lib/sources/custom-no-cache.d.ts +13 -0
  14. package/lib/sources/custom.d.ts +13 -0
  15. package/lib/sources/facebook.d.ts +13 -0
  16. package/lib/sources/github.d.ts +17 -0
  17. package/lib/sources/google.d.ts +22 -0
  18. package/lib/sources/gravatar.d.ts +13 -0
  19. package/lib/sources/initials.d.ts +20 -0
  20. package/lib/sources/instagram.d.ts +21 -0
  21. package/lib/sources/skype.d.ts +12 -0
  22. package/lib/sources/source.creator.d.ts +5 -0
  23. package/lib/sources/source.d.ts +21 -0
  24. package/lib/sources/source.factory.d.ts +16 -0
  25. package/lib/sources/twitter.d.ts +14 -0
  26. package/lib/sources/value.d.ts +12 -0
  27. package/lib/sources/vkontakte.d.ts +19 -0
  28. package/ng-hub-ui-avatar-19.0.0.tgz +0 -0
  29. package/package.json +64 -0
  30. package/public_api.d.ts +5 -0
package/README.md ADDED
@@ -0,0 +1,170 @@
1
+ # ng-hub-ui-avatar
2
+
3
+ [![npm version](https://badge.fury.io/js/ng-hub-ui-avatar.svg)](https://badge.fury.io/js/ng-hub-ui-avatar)
4
+ [![npm](https://img.shields.io/npm/dt/ng-hub-ui-avatar.svg)](https://www.npmjs.com/package/ng-hub-ui-avatar)
5
+
6
+
7
+ ## Part of ng-hub-ui Family
8
+ This component is part of the ng-hub-ui ecosystem, which includes:
9
+ - [ng-hub-ui-table](https://www.npmjs.com/package/ng-hub-ui-table)
10
+ - [ng-hub-ui-modal](https://www.npmjs.com/package/ng-hub-ui-modal)
11
+ - [ng-hub-ui-stepper](https://www.npmjs.com/package/ng-hub-ui-stepper)
12
+ - [ng-hub-ui-breadcrumbs](https://www.npmjs.com/package/ng-hub-ui-breadcrumbs)
13
+ - [ng-hub-ui-portal](https://www.npmjs.com/package/ng-hub-ui-portal)
14
+
15
+ ## Credits and Attribution
16
+ This library is a fork of [ngx-avatars](https://github.com/Heatmanofurioso/ngx-avatars), originally created by [HaithemMosbahi](https://github.com/HaithemMosbahi) and maintained by [Tiago Casinhas](https://github.com/Heatmanofurioso).
17
+
18
+ The original work provided an excellent foundation for avatar management in Angular applications. This fork was created to:
19
+ - Provide a standalone component architecture
20
+ - Ensure compatibility with the latest Angular versions
21
+ - Integrate seamlessly with the ng-hub-ui component ecosystem
22
+ - Add new features and improvements while maintaining the original functionality
23
+
24
+ All credit for the original implementation goes to the original authors and contributors of ngx-avatars.
25
+
26
+ ## Description
27
+ A versatile avatar component for Angular applications that fetches or generates avatars based on user information. The component includes a sophisticated fallback system that attempts different sources if the primary source fails.
28
+
29
+ You can use this component with either a single source or multiple avatar sources, with the fallback system automatically selecting the first valid avatar.
30
+
31
+ Additionally, the component can display name initials or custom values as avatars.
32
+
33
+ Supported avatar sources:
34
+
35
+ * Facebook
36
+ * Google
37
+ * Twitter
38
+ * Instagram
39
+ * Vkontakte (VK)
40
+ * Skype
41
+ * Gravatar (🚧 Under construction)
42
+ * GitHub
43
+ * Custom image
44
+ * Name initials
45
+ * Value
46
+
47
+ The fallback system follows the same order as the source list above, with Facebook having the highest priority.
48
+
49
+ ## Installation
50
+
51
+ Install the avatar component using npm:
52
+
53
+ ```bash
54
+ npm install ng-hub-ui-avatar --save
55
+ ```
56
+
57
+ Or using yarn:
58
+
59
+ ```bash
60
+ yarn add ng-hub-ui-avatar
61
+ ```
62
+
63
+ ## Usage
64
+
65
+ As this is a standalone component, you don't need to import any module. Just import the component directly in your standalone components or pages:
66
+
67
+ ```typescript
68
+ import { Component } from '@angular/core';
69
+ import { NgHubUiAvatar } from 'ng-hub-ui-avatar';
70
+
71
+ @Component({
72
+ selector: 'app-my-component',
73
+ standalone: true,
74
+ imports: [NgHubUiAvatar],
75
+ template: `
76
+ <ng-hub-ui-avatar></ng-hub-ui-avatar>
77
+ `
78
+ })
79
+ export class MyComponent { }
80
+ ```
81
+
82
+ If you're using NgModule (legacy approach), you can import it in your components array:
83
+
84
+ ```typescript
85
+ import { NgModule } from '@angular/core';
86
+ import { NgHubUiAvatar } from 'ng-hub-ui-avatar';
87
+
88
+ @NgModule({
89
+ imports: [
90
+ // other imports...
91
+ ],
92
+ declarations: [AppComponent],
93
+ bootstrap: [AppComponent]
94
+ })
95
+ export class AppModule { }
96
+ ```
97
+
98
+ Use it in your components:
99
+
100
+ ```html
101
+ <ng-hub-ui-avatar></ng-hub-ui-avatar>
102
+ ```
103
+
104
+ ## Examples
105
+
106
+ ```html
107
+ <ng-hub-ui-avatar facebookId="1508319875"></ng-hub-ui-avatar>
108
+ <ng-hub-ui-avatar googleId="1508319875"></ng-hub-ui-avatar>
109
+ <ng-hub-ui-avatar twitterId="1508319875"></ng-hub-ui-avatar>
110
+ <ng-hub-ui-avatar instagramId="dccomics" size="70"></ng-hub-ui-avatar>
111
+ <ng-hub-ui-avatar name="John Doe"></ng-hub-ui-avatar>
112
+ <ng-hub-ui-avatar value="75%"></ng-hub-ui-avatar>
113
+
114
+ <!-- Multiple sources with fallback -->
115
+ <ng-hub-ui-avatar
116
+ facebookId="userFacebookID"
117
+ skypeId="userSkypeID"
118
+ googleId="google"
119
+ name="John Doe"
120
+ src="assets/avatar.jpg"
121
+ value="28%"
122
+ size="100"
123
+ [round]="true">
124
+ </ng-hub-ui-avatar>
125
+ ```
126
+
127
+ ## Options
128
+
129
+ | Attribute | Type | Default | Description |
130
+ |------------------|------------|-----------|--------------------------------------------------------------------------------------------------------------------------------------|
131
+ | `facebookId` | *string* | null | Facebook ID |
132
+ | `googleId` | *string* | null | Google ID |
133
+ | `twitterId` | *string* | null | Twitter Handle |
134
+ | `instagramId` | *string* | null | Instagram Handle |
135
+ | `vkontakteId` | *string* | null | VK ID |
136
+ | `skypeId` | *string* | null | Skype ID |
137
+ | `githubId` | *string* | null | Github ID |
138
+ | `src` | *string* | null | Fallback image to use |
139
+ | `name` | *string* | null | Will be used to generate avatar based on initials |
140
+ | `value` | *string* | null | Show a value as avatar |
141
+ | `initialsSize` | *number* | 0 | Limits the number of characters in initials (0 = no limit) |
142
+ | `bgColor` | *string* | random | Background color (hex format, e.g., #FF0000) |
143
+ | `fgColor` | *string* | #FFF | Text color (hex format, e.g., #FF0000) |
144
+ | `size` | *number* | 50 | Size of the avatar |
145
+ | `textSizeRatio` | *number* | 3 | Text size as a fraction of avatar size |
146
+ | `round` | *boolean* | true | Round the avatar corners |
147
+ | `cornerRadius` | *number* | 0 | Border radius for square avatars |
148
+ | `borderColor` | *string* | undefined | Border color |
149
+ | `style` | *object* | | Custom styles for root element |
150
+ | `clickOnAvatar` | *Output* | | Event emitted on avatar click |
151
+ | `referrerpolicy` | *string* | null | Referrer policy for image requests |
152
+
153
+ ## Support the Project
154
+ If you find this library helpful, consider supporting its development:
155
+
156
+ [!["Buy Me A Coffee"](https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png)](https://www.buymeacoffee.com/carlosmorcillo)
157
+
158
+ ## Contributing
159
+
160
+ Contributions are welcome! Here's how you can help:
161
+
162
+ 1. Fork the repository
163
+ 2. Create your feature branch: `git checkout -b feature/my-new-feature`
164
+ 3. Commit your changes: `git commit -am 'Add some feature'`
165
+ 4. Push to the branch: `git push origin feature/my-new-feature`
166
+ 5. Submit a pull request
167
+
168
+ ## License
169
+
170
+ MIT © [Carlos Morcillo](mailto:contact@carlosmorcillo.dev)