@styloviz/avatar 0.1.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 (6) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +59 -0
  3. package/fesm2022/styloviz-avatar.mjs +200 -0
  4. package/fesm2022/styloviz-avatar.mjs.map +1 -0
  5. package/package.json +42 -0
  6. package/types/styloviz-avatar.d.ts +97 -0
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 StyloViz
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,59 @@
1
+ # @styloviz/avatar
2
+
3
+ > User avatar with initials fallback, status indicator, size and shape variants.
4
+
5
+ Part of the **StyloViz UI Kit** — a premium Angular 21 + Tailwind CSS 4 dashboard component library. Standalone, `OnPush`, strongly typed, dark-mode ready.
6
+
7
+ ## Installation
8
+
9
+ ```bash
10
+ npm install @styloviz/core @styloviz/avatar
11
+ ```
12
+
13
+ Requires `@angular/core` and `@angular/common` >= 21. `@styloviz/core` is a peer dependency shared by every component. Prefer everything at once? `@styloviz/all` installs the whole free tier in one command.
14
+
15
+ ## Usage
16
+
17
+ ```ts
18
+ import { SvAvatarComponent } from '@styloviz/avatar';
19
+
20
+ @Component({
21
+ standalone: true,
22
+ imports: [SvAvatarComponent],
23
+ template: `
24
+ <sv-avatar name="Alex Johnson" status="online" size="md" />
25
+ `,
26
+ })
27
+ export class DemoComponent {}
28
+ ```
29
+
30
+ ## Inputs
31
+
32
+ | Input | Type | Default | Description |
33
+ | --- | --- | --- | --- |
34
+ | `src` | `string` | `''` | URL of the avatar image. When blank or broken, falls back to initials/icon. |
35
+ | `name` | `string` | `''` | Full name — used to generate initials and auto-assign a palette color. |
36
+ | `alt` | `string` | `''` | Alt text for the image; falls back to `name`. |
37
+ | `size` | `AvatarSize` | `'md'` | Avatar size. |
38
+ | `shape` | `AvatarShape` | `'circle'` | Border-radius style. |
39
+ | `status` | `AvatarStatus` | `'none'` | Presence status indicator rendered as a small dot. Set to `'none'` to hide it entirely. |
40
+ | `color` | `AvatarColor` | `'auto'` | Color palette for the initials background. `'auto'` derives a consistent hue from the name string. |
41
+ | `verified` | `boolean` | `false` | Show a verified checkmark badge in the bottom-right corner. Overridden by `badgeCount` when that is > 0. |
42
+ | `badgeCount` | `number` | `0` | Notification count shown in the top-right corner. Set to 0 to hide. |
43
+ | `badgeMax` | `number` | `9` | Cap for the badge count display (e.g. 9 → shows "9+"). |
44
+ | `customClass` | `string` | `''` | Additional CSS classes merged onto the root wrapper. |
45
+ | `clickable` | `boolean` | `false` | Makes the avatar interactive (adds cursor-pointer, hover/focus styles, and emits `avatarClick`). |
46
+
47
+ ## Outputs
48
+
49
+ | Output | Type | Description |
50
+ | --- | --- | --- |
51
+ | `avatarClick` | `Event` | Emitted when the avatar is activated (click or keyboard) and `clickable` is true. |
52
+
53
+ ## Documentation
54
+
55
+ Full API reference and live demos: https://styloviz.dev/docs/avatar
56
+
57
+ ## License
58
+
59
+ MIT
package/fesm2022/styloviz-avatar.mjs ADDED
@@ -0,0 +1,200 @@
1
+ import * as i0 from '@angular/core';
2
+ import { input, output, signal, computed, ChangeDetectionStrategy, Component } from '@angular/core';
3
+ import { NgClass } from '@angular/common';
4
+
5
+ // ─── Internal constants ───────────────────────────────────────────────────────
6
+ const COLOR_PALETTE = [
7
+ 'primary', 'violet', 'rose', 'amber', 'teal',
8
+ 'sky', 'indigo', 'fuchsia', 'lime', 'orange',
9
+ ];
10
+ // ─── Component ───────────────────────────────────────────────────────────────
11
+ /**
12
+ * Avatar — Represents a user or entity with an image, initials, or fallback icon.
13
+ *
14
+ * Features:
15
+ * - Image with graceful fallback → initials → generic icon
16
+ * - 6 sizes × 3 shapes × 10 auto-colored initials palettes
17
+ * - Presence status indicator (online / offline / away / busy)
18
+ * - Optional notification badge (count or dot)
19
+ * - Verified / crown / custom indicator overlay
20
+ * - Click interaction support
21
+ */
22
+ class SvAvatarComponent {
23
+ // ── Inputs ────────────────────────────────────────────────────────────────
24
+ /** URL of the avatar image. When blank or broken, falls back to initials/icon. */
25
+ src = input('', ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
26
+ /** Full name — used to generate initials and auto-assign a palette color. */
27
+ name = input('', ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
28
+ /** Alt text for the image; falls back to `name`. */
29
+ alt = input('', ...(ngDevMode ? [{ debugName: "alt" }] : /* istanbul ignore next */ []));
30
+ /** Avatar size. @default 'md' */
31
+ size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
32
+ /** Border-radius style. @default 'circle' */
33
+ shape = input('circle', ...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
34
+ /**
35
+ * Presence status indicator rendered as a small dot.
36
+ * Set to `'none'` to hide it entirely. @default 'none'
37
+ */
38
+ status = input('none', ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
39
+ /**
40
+ * Color palette for the initials background.
41
+ * `'auto'` derives a consistent hue from the name string. @default 'auto'
42
+ */
43
+ color = input('auto', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
44
+ /**
45
+ * Show a verified checkmark badge in the bottom-right corner.
46
+ * Overridden by `badgeCount` when that is > 0. @default false
47
+ */
48
+ verified = input(false, ...(ngDevMode ? [{ debugName: "verified" }] : /* istanbul ignore next */ []));
49
+ /**
50
+ * Notification count shown in the top-right corner.
51
+ * Set to 0 to hide. @default 0
52
+ */
53
+ badgeCount = input(0, ...(ngDevMode ? [{ debugName: "badgeCount" }] : /* istanbul ignore next */ []));
54
+ /** Cap for the badge count display (e.g. 9 → shows "9+"). @default 9 */
55
+ badgeMax = input(9, ...(ngDevMode ? [{ debugName: "badgeMax" }] : /* istanbul ignore next */ []));
56
+ /** Additional CSS classes merged onto the root wrapper. */
57
+ customClass = input('', ...(ngDevMode ? [{ debugName: "customClass" }] : /* istanbul ignore next */ []));
58
+ /**
59
+ * Makes the avatar interactive (adds cursor-pointer, hover/focus styles,
60
+ * and emits `avatarClick`). @default false
61
+ */
62
+ clickable = input(false, ...(ngDevMode ? [{ debugName: "clickable" }] : /* istanbul ignore next */ []));
63
+ // ── Outputs ───────────────────────────────────────────────────────────────
64
+ /** Emitted when the avatar is activated (click or keyboard) and `clickable` is true. */
65
+ avatarClick = output();
66
+ // ── Internal state ────────────────────────────────────────────────────────
67
+ /** Tracks whether the <img> failed to load so we fall back to initials/icon. */
68
+ imgError = signal(false, ...(ngDevMode ? [{ debugName: "imgError" }] : /* istanbul ignore next */ []));
69
+ // ── Computed ──────────────────────────────────────────────────────────────
70
+ /** Whether to show the <img> element at all. */
71
+ showImage = computed(() => !!this.src() && !this.imgError(), ...(ngDevMode ? [{ debugName: "showImage" }] : /* istanbul ignore next */ []));
72
+ /** Two-letter initials derived from `name`. */
73
+ initials = computed(() => {
74
+ const n = this.name().trim();
75
+ if (!n)
76
+ return '';
77
+ const parts = n.split(/\s+/);
78
+ if (parts.length === 1)
79
+ return parts[0].slice(0, 2).toUpperCase();
80
+ return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
81
+ }, ...(ngDevMode ? [{ debugName: "initials" }] : /* istanbul ignore next */ []));
82
+ /** Resolved palette color. */
83
+ resolvedColor = computed(() => {
84
+ const c = this.color();
85
+ if (c !== 'auto')
86
+ return c;
87
+ const n = this.name();
88
+ if (!n)
89
+ return 'primary';
90
+ // Simple, stable hash from the name string
91
+ const hash = [...n].reduce((acc, ch) => acc + ch.charCodeAt(0), 0);
92
+ return COLOR_PALETTE[hash % COLOR_PALETTE.length];
93
+ }, ...(ngDevMode ? [{ debugName: "resolvedColor" }] : /* istanbul ignore next */ []));
94
+ /** Whether to show the generic SVG icon (no image, no name). */
95
+ showIcon = computed(() => !this.showImage() && !this.initials(), ...(ngDevMode ? [{ debugName: "showIcon" }] : /* istanbul ignore next */ []));
96
+ /** Formatted badge count string. */
97
+ displayBadge = computed(() => {
98
+ const n = this.badgeCount();
99
+ const max = this.badgeMax();
100
+ return n > max ? `${max}+` : `${n}`;
101
+ }, ...(ngDevMode ? [{ debugName: "displayBadge" }] : /* istanbul ignore next */ []));
102
+ showBadge = computed(() => this.badgeCount() > 0, ...(ngDevMode ? [{ debugName: "showBadge" }] : /* istanbul ignore next */ []));
103
+ // ── Root classes ──────────────────────────────────────────────────────────
104
+ rootClasses = computed(() => [
105
+ 'relative inline-flex shrink-0',
106
+ this.clickable()
107
+ ? 'cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2'
108
+ : '',
109
+ this.customClass(),
110
+ ].filter(Boolean).join(' '), ...(ngDevMode ? [{ debugName: "rootClasses" }] : /* istanbul ignore next */ []));
111
+ /** Size classes for the avatar shell. */
112
+ sizeClasses = computed(() => {
113
+ switch (this.size()) {
114
+ case 'xs': return 'h-6 w-6 text-[10px]';
115
+ case 'sm': return 'h-8 w-8 text-xs';
116
+ case 'lg': return 'h-12 w-12 text-base';
117
+ case 'xl': return 'h-16 w-16 text-xl';
118
+ case '2xl': return 'h-20 w-20 text-2xl';
119
+ default: return 'h-10 w-10 text-sm'; // md
120
+ }
121
+ }, ...(ngDevMode ? [{ debugName: "sizeClasses" }] : /* istanbul ignore next */ []));
122
+ /** Shape / border-radius classes. */
123
+ shapeClasses = computed(() => {
124
+ switch (this.shape()) {
125
+ case 'square': return 'rounded-none';
126
+ case 'rounded': return 'rounded-lg';
127
+ default: return 'rounded-full';
128
+ }
129
+ }, ...(ngDevMode ? [{ debugName: "shapeClasses" }] : /* istanbul ignore next */ []));
130
+ /** Initials background + text color classes keyed to the resolved palette. */
131
+ initialsColorClasses = computed(() => {
132
+ const map = {
133
+ primary: 'bg-primary-100 text-primary-700 dark:bg-primary-900/50 dark:text-primary-300',
134
+ violet: 'bg-violet-100 text-violet-700 dark:bg-violet-900/50 dark:text-violet-300',
135
+ rose: 'bg-rose-100 text-rose-700 dark:bg-rose-900/50 dark:text-rose-300',
136
+ amber: 'bg-amber-100 text-amber-700 dark:bg-amber-900/50 dark:text-amber-300',
137
+ teal: 'bg-teal-100 text-teal-700 dark:bg-teal-900/50 dark:text-teal-300',
138
+ sky: 'bg-sky-100 text-sky-700 dark:bg-sky-900/50 dark:text-sky-300',
139
+ indigo: 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900/50 dark:text-indigo-300',
140
+ fuchsia: 'bg-fuchsia-100 text-fuchsia-700 dark:bg-fuchsia-900/50 dark:text-fuchsia-300',
141
+ lime: 'bg-lime-100 text-lime-700 dark:bg-lime-900/50 dark:text-lime-300',
142
+ orange: 'bg-orange-100 text-orange-700 dark:bg-orange-900/50 dark:text-orange-300',
143
+ };
144
+ return map[this.resolvedColor()];
145
+ }, ...(ngDevMode ? [{ debugName: "initialsColorClasses" }] : /* istanbul ignore next */ []));
146
+ /** Status dot background color. */
147
+ statusColorClass = computed(() => {
148
+ switch (this.status()) {
149
+ case 'online': return 'bg-emerald-500';
150
+ case 'offline': return 'bg-gray-400 dark:bg-gray-600';
151
+ case 'away': return 'bg-amber-400';
152
+ case 'busy': return 'bg-red-500';
153
+ default: return '';
154
+ }
155
+ }, ...(ngDevMode ? [{ debugName: "statusColorClass" }] : /* istanbul ignore next */ []));
156
+ /** Status dot size keyed to avatar size. */
157
+ statusSizeClasses = computed(() => {
158
+ switch (this.size()) {
159
+ case 'xs':
160
+ case 'sm': return 'h-2 w-2';
161
+ case 'lg':
162
+ case 'xl':
163
+ case '2xl': return 'h-3.5 w-3.5';
164
+ default: return 'h-2.5 w-2.5';
165
+ }
166
+ }, ...(ngDevMode ? [{ debugName: "statusSizeClasses" }] : /* istanbul ignore next */ []));
167
+ /** Badge size keyed to avatar size. */
168
+ badgeSizeClasses = computed(() => {
169
+ switch (this.size()) {
170
+ case 'xs':
171
+ case 'sm': return 'h-3.5 min-w-3.5 text-[9px] px-0.5';
172
+ case 'lg':
173
+ case 'xl':
174
+ case '2xl': return 'h-5 min-w-5 text-[11px] px-1';
175
+ default: return 'h-4 min-w-4 text-[10px] px-0.5';
176
+ }
177
+ }, ...(ngDevMode ? [{ debugName: "badgeSizeClasses" }] : /* istanbul ignore next */ []));
178
+ // ── Events ────────────────────────────────────────────────────────────────
179
+ onImageError() {
180
+ this.imgError.set(true);
181
+ }
182
+ onClick(event) {
183
+ if (this.clickable()) {
184
+ this.avatarClick.emit(event);
185
+ }
186
+ }
187
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SvAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
188
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SvAvatarComponent, isStandalone: true, selector: "sv-avatar", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, verified: { classPropertyName: "verified", publicName: "verified", isSignal: true, isRequired: false, transformFunction: null }, badgeCount: { classPropertyName: "badgeCount", publicName: "badgeCount", isSignal: true, isRequired: false, transformFunction: null }, badgeMax: { classPropertyName: "badgeMax", publicName: "badgeMax", isSignal: true, isRequired: false, transformFunction: null }, customClass: { classPropertyName: "customClass", publicName: "customClass", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { avatarClick: "avatarClick" }, ngImport: i0, template: "<span\n [ngClass]=\"rootClasses()\"\n [attr.role]=\"clickable() ? 'button' : null\"\n [attr.tabindex]=\"clickable() ? 0 : null\"\n [attr.aria-label]=\"name() || alt() || 'Avatar'\"\n (click)=\"onClick($event)\"\n (keydown.enter)=\"onClick($event)\"\n (keydown.space)=\"onClick($event)\"\n>\n <!-- \u2500\u2500 Avatar shell \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <span\n class=\"flex items-center justify-center overflow-hidden font-semibold transition-opacity duration-150\"\n [ngClass]=\"[\n sizeClasses(),\n shapeClasses(),\n showImage() ? '' : initialsColorClasses(),\n clickable() ? 'hover:opacity-90 active:opacity-75' : ''\n ]\"\n >\n <!-- Image -->\n @if (showImage()) {\n <img\n class=\"h-full w-full object-cover\"\n [src]=\"src()\"\n [alt]=\"alt() || name()\"\n (error)=\"onImageError()\"\n loading=\"lazy\"\n decoding=\"async\"\n />\n }\n\n <!-- Initials -->\n @if (!showImage() && initials()) {\n <span aria-hidden=\"true\" class=\"leading-none select-none\">\n {{ initials() }}\n </span>\n }\n\n <!-- Generic fallback icon (no image, no name) -->\n @if (showIcon()) {\n <svg\n class=\"h-[55%] w-[55%] opacity-60\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n >\n <path d=\"M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-5.33 0-8 2.67-8 4v1h16v-1c0-1.33-2.67-4-8-4Z\" />\n </svg>\n }\n </span>\n\n <!-- \u2500\u2500 Status indicator \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if (status() !== 'none') {\n <span\n class=\"absolute bottom-0 right-0 block rounded-full ring-2 ring-white dark:ring-gray-900\"\n [ngClass]=\"[statusSizeClasses(), statusColorClass()]\"\n [attr.aria-label]=\"'Status: ' + status()\"\n role=\"img\"\n ></span>\n }\n\n <!-- \u2500\u2500 Notification badge \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if (showBadge()) {\n <span\n class=\"absolute -right-1 -top-1 flex items-center justify-center rounded-full\n bg-red-500 font-bold leading-none text-white tabular-nums\n ring-2 ring-white dark:ring-gray-900\"\n [ngClass]=\"badgeSizeClasses()\"\n aria-live=\"polite\"\n [attr.aria-label]=\"badgeCount() + ' notifications'\"\n >\n {{ displayBadge() }}\n </span>\n }\n\n <!-- \u2500\u2500 Verified checkmark \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if (verified() && !showBadge()) {\n <span\n class=\"absolute bottom-0 right-0 flex items-center justify-center rounded-full\n bg-primary-500 ring-2 ring-white dark:ring-gray-900\"\n [ngClass]=\"size() === 'xs' || size() === 'sm' ? 'h-3.5 w-3.5' :\n size() === 'md' ? 'h-4 w-4' : 'h-5 w-5'\"\n aria-label=\"Verified\"\n role=\"img\"\n >\n <svg\n class=\"h-[65%] w-[65%] text-white\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n >\n <path d=\"M2 6l3 3 5-5\" />\n </svg>\n </span>\n }\n</span>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
189
+ }
190
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SvAvatarComponent, decorators: [{
191
+ type: Component,
192
+ args: [{ selector: 'sv-avatar', standalone: true, imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n [ngClass]=\"rootClasses()\"\n [attr.role]=\"clickable() ? 'button' : null\"\n [attr.tabindex]=\"clickable() ? 0 : null\"\n [attr.aria-label]=\"name() || alt() || 'Avatar'\"\n (click)=\"onClick($event)\"\n (keydown.enter)=\"onClick($event)\"\n (keydown.space)=\"onClick($event)\"\n>\n <!-- \u2500\u2500 Avatar shell \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <span\n class=\"flex items-center justify-center overflow-hidden font-semibold transition-opacity duration-150\"\n [ngClass]=\"[\n sizeClasses(),\n shapeClasses(),\n showImage() ? '' : initialsColorClasses(),\n clickable() ? 'hover:opacity-90 active:opacity-75' : ''\n ]\"\n >\n <!-- Image -->\n @if (showImage()) {\n <img\n class=\"h-full w-full object-cover\"\n [src]=\"src()\"\n [alt]=\"alt() || name()\"\n (error)=\"onImageError()\"\n loading=\"lazy\"\n decoding=\"async\"\n />\n }\n\n <!-- Initials -->\n @if (!showImage() && initials()) {\n <span aria-hidden=\"true\" class=\"leading-none select-none\">\n {{ initials() }}\n </span>\n }\n\n <!-- Generic fallback icon (no image, no name) -->\n @if (showIcon()) {\n <svg\n class=\"h-[55%] w-[55%] opacity-60\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n >\n <path d=\"M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-5.33 0-8 2.67-8 4v1h16v-1c0-1.33-2.67-4-8-4Z\" />\n </svg>\n }\n </span>\n\n <!-- \u2500\u2500 Status indicator \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if (status() !== 'none') {\n <span\n class=\"absolute bottom-0 right-0 block rounded-full ring-2 ring-white dark:ring-gray-900\"\n [ngClass]=\"[statusSizeClasses(), statusColorClass()]\"\n [attr.aria-label]=\"'Status: ' + status()\"\n role=\"img\"\n ></span>\n }\n\n <!-- \u2500\u2500 Notification badge \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if (showBadge()) {\n <span\n class=\"absolute -right-1 -top-1 flex items-center justify-center rounded-full\n bg-red-500 font-bold leading-none text-white tabular-nums\n ring-2 ring-white dark:ring-gray-900\"\n [ngClass]=\"badgeSizeClasses()\"\n aria-live=\"polite\"\n [attr.aria-label]=\"badgeCount() + ' notifications'\"\n >\n {{ displayBadge() }}\n </span>\n }\n\n <!-- \u2500\u2500 Verified checkmark \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if (verified() && !showBadge()) {\n <span\n class=\"absolute bottom-0 right-0 flex items-center justify-center rounded-full\n bg-primary-500 ring-2 ring-white dark:ring-gray-900\"\n [ngClass]=\"size() === 'xs' || size() === 'sm' ? 'h-3.5 w-3.5' :\n size() === 'md' ? 'h-4 w-4' : 'h-5 w-5'\"\n aria-label=\"Verified\"\n role=\"img\"\n >\n <svg\n class=\"h-[65%] w-[65%] text-white\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n >\n <path d=\"M2 6l3 3 5-5\" />\n </svg>\n </span>\n }\n</span>\n" }]
193
+ }], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], verified: [{ type: i0.Input, args: [{ isSignal: true, alias: "verified", required: false }] }], badgeCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeCount", required: false }] }], badgeMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeMax", required: false }] }], customClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "customClass", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], avatarClick: [{ type: i0.Output, args: ["avatarClick"] }] } });
194
+
195
+ /**
196
+ * Generated bundle index. Do not edit.
197
+ */
198
+
199
+ export { SvAvatarComponent };
200
+ //# sourceMappingURL=styloviz-avatar.mjs.map
package/fesm2022/styloviz-avatar.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"styloviz-avatar.mjs","sources":["../../../../projects/avatar-free/src/lib/avatar.component.ts","../../../../projects/avatar-free/src/lib/avatar.component.html","../../../../projects/avatar-free/src/styloviz-avatar.ts"],"sourcesContent":["import {\n Component,\n input,\n output,\n computed,\n signal,\n ChangeDetectionStrategy,\n} from '@angular/core';\nimport { NgClass } from '@angular/common';\n\n// ─── Types ───────────────────────────────────────────────────────────────────\n\nexport type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\nexport type AvatarShape = 'circle' | 'rounded' | 'square';\nexport type AvatarStatus = 'online' | 'offline' | 'away' | 'busy' | 'none';\n\n/**\n * Palette used when rendering initials — cycles through 10 distinct hues\n * so adjacent avatars in a stack rarely share the same color.\n */\nexport type AvatarColor =\n | 'auto' // derived from name (default)\n | 'primary'\n | 'violet'\n | 'rose'\n | 'amber'\n | 'teal'\n | 'sky'\n | 'indigo'\n | 'fuchsia'\n | 'lime'\n | 'orange';\n\n// ─── Internal constants ───────────────────────────────────────────────────────\n\nconst COLOR_PALETTE: Exclude<AvatarColor, 'auto'>[] = [\n 'primary', 'violet', 'rose', 'amber', 'teal',\n 'sky', 'indigo', 'fuchsia', 'lime', 'orange',\n];\n\n// ─── Component ───────────────────────────────────────────────────────────────\n\n/**\n * Avatar — Represents a user or entity with an image, initials, or fallback icon.\n *\n * Features:\n * - Image with graceful fallback → initials → generic icon\n * - 6 sizes × 3 shapes × 10 auto-colored initials palettes\n * - Presence status indicator (online / offline / away / busy)\n * - Optional notification badge (count or dot)\n * - Verified / crown / custom indicator overlay\n * - Click interaction support\n */\n@Component({\n selector: 'sv-avatar',\n standalone: true,\n imports: [NgClass],\n templateUrl: './avatar.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SvAvatarComponent {\n // ── Inputs ────────────────────────────────────────────────────────────────\n\n /** URL of the avatar image. When blank or broken, falls back to initials/icon. */\n src = input<string>('');\n\n /** Full name — used to generate initials and auto-assign a palette color. */\n name = input<string>('');\n\n /** Alt text for the image; falls back to `name`. */\n alt = input<string>('');\n\n /** Avatar size. @default 'md' */\n size = input<AvatarSize>('md');\n\n /** Border-radius style. @default 'circle' */\n shape = input<AvatarShape>('circle');\n\n /**\n * Presence status indicator rendered as a small dot.\n * Set to `'none'` to hide it entirely. @default 'none'\n */\n status = input<AvatarStatus>('none');\n\n /**\n * Color palette for the initials background.\n * `'auto'` derives a consistent hue from the name string. @default 'auto'\n */\n color = input<AvatarColor>('auto');\n\n\n\n /**\n * Show a verified checkmark badge in the bottom-right corner.\n * Overridden by `badgeCount` when that is > 0. @default false\n */\n verified = input<boolean>(false);\n\n /**\n * Notification count shown in the top-right corner.\n * Set to 0 to hide. @default 0\n */\n badgeCount = input<number>(0);\n\n /** Cap for the badge count display (e.g. 9 → shows \"9+\"). @default 9 */\n badgeMax = input<number>(9);\n\n /** Additional CSS classes merged onto the root wrapper. */\n customClass = input<string>('');\n\n /**\n * Makes the avatar interactive (adds cursor-pointer, hover/focus styles,\n * and emits `avatarClick`). @default false\n */\n clickable = input<boolean>(false);\n\n // ── Outputs ───────────────────────────────────────────────────────────────\n\n /** Emitted when the avatar is activated (click or keyboard) and `clickable` is true. */\n avatarClick = output<Event>();\n\n // ── Internal state ────────────────────────────────────────────────────────\n\n /** Tracks whether the <img> failed to load so we fall back to initials/icon. */\n readonly imgError = signal(false);\n\n // ── Computed ──────────────────────────────────────────────────────────────\n\n /** Whether to show the <img> element at all. */\n showImage = computed(() => !!this.src() && !this.imgError());\n\n /** Two-letter initials derived from `name`. */\n initials = computed<string>(() => {\n const n = this.name().trim();\n if (!n) return '';\n const parts = n.split(/\\s+/);\n if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();\n return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();\n });\n\n /** Resolved palette color. */\n resolvedColor = computed<Exclude<AvatarColor, 'auto'>>(() => {\n const c = this.color();\n if (c !== 'auto') return c;\n const n = this.name();\n if (!n) return 'primary';\n // Simple, stable hash from the name string\n const hash = [...n].reduce((acc, ch) => acc + ch.charCodeAt(0), 0);\n return COLOR_PALETTE[hash % COLOR_PALETTE.length];\n });\n\n /** Whether to show the generic SVG icon (no image, no name). */\n showIcon = computed(() => !this.showImage() && !this.initials());\n\n /** Formatted badge count string. */\n displayBadge = computed<string>(() => {\n const n = this.badgeCount();\n const max = this.badgeMax();\n return n > max ? `${max}+` : `${n}`;\n });\n\n showBadge = computed(() => this.badgeCount() > 0);\n\n // ── Root classes ──────────────────────────────────────────────────────────\n\n rootClasses = computed(() => [\n 'relative inline-flex shrink-0',\n this.clickable()\n ? 'cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2'\n : '',\n this.customClass(),\n ].filter(Boolean).join(' '));\n\n /** Size classes for the avatar shell. */\n sizeClasses = computed<string>(() => {\n switch (this.size()) {\n case 'xs': return 'h-6 w-6 text-[10px]';\n case 'sm': return 'h-8 w-8 text-xs';\n case 'lg': return 'h-12 w-12 text-base';\n case 'xl': return 'h-16 w-16 text-xl';\n case '2xl': return 'h-20 w-20 text-2xl';\n default: return 'h-10 w-10 text-sm'; // md\n }\n });\n\n /** Shape / border-radius classes. */\n shapeClasses = computed<string>(() => {\n switch (this.shape()) {\n case 'square': return 'rounded-none';\n case 'rounded': return 'rounded-lg';\n default: return 'rounded-full';\n }\n });\n\n\n /** Initials background + text color classes keyed to the resolved palette. */\n initialsColorClasses = computed<string>(() => {\n const map: Record<Exclude<AvatarColor, 'auto'>, string> = {\n primary: 'bg-primary-100 text-primary-700 dark:bg-primary-900/50 dark:text-primary-300',\n violet: 'bg-violet-100 text-violet-700 dark:bg-violet-900/50 dark:text-violet-300',\n rose: 'bg-rose-100 text-rose-700 dark:bg-rose-900/50 dark:text-rose-300',\n amber: 'bg-amber-100 text-amber-700 dark:bg-amber-900/50 dark:text-amber-300',\n teal: 'bg-teal-100 text-teal-700 dark:bg-teal-900/50 dark:text-teal-300',\n sky: 'bg-sky-100 text-sky-700 dark:bg-sky-900/50 dark:text-sky-300',\n indigo: 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900/50 dark:text-indigo-300',\n fuchsia: 'bg-fuchsia-100 text-fuchsia-700 dark:bg-fuchsia-900/50 dark:text-fuchsia-300',\n lime: 'bg-lime-100 text-lime-700 dark:bg-lime-900/50 dark:text-lime-300',\n orange: 'bg-orange-100 text-orange-700 dark:bg-orange-900/50 dark:text-orange-300',\n };\n return map[this.resolvedColor()];\n });\n\n /** Status dot background color. */\n statusColorClass = computed<string>(() => {\n switch (this.status()) {\n case 'online': return 'bg-emerald-500';\n case 'offline': return 'bg-gray-400 dark:bg-gray-600';\n case 'away': return 'bg-amber-400';\n case 'busy': return 'bg-red-500';\n default: return '';\n }\n });\n\n /** Status dot size keyed to avatar size. */\n statusSizeClasses = computed<string>(() => {\n switch (this.size()) {\n case 'xs':\n case 'sm': return 'h-2 w-2';\n case 'lg':\n case 'xl':\n case '2xl': return 'h-3.5 w-3.5';\n default: return 'h-2.5 w-2.5';\n }\n });\n\n /** Badge size keyed to avatar size. */\n badgeSizeClasses = computed<string>(() => {\n switch (this.size()) {\n case 'xs':\n case 'sm': return 'h-3.5 min-w-3.5 text-[9px] px-0.5';\n case 'lg':\n case 'xl':\n case '2xl': return 'h-5 min-w-5 text-[11px] px-1';\n default: return 'h-4 min-w-4 text-[10px] px-0.5';\n }\n });\n\n // ── Events ────────────────────────────────────────────────────────────────\n\n onImageError(): void {\n this.imgError.set(true);\n }\n\n onClick(event: Event): void {\n if (this.clickable()) {\n this.avatarClick.emit(event);\n }\n }\n}\n","<span\n [ngClass]=\"rootClasses()\"\n [attr.role]=\"clickable() ? 'button' : null\"\n [attr.tabindex]=\"clickable() ? 0 : null\"\n [attr.aria-label]=\"name() || alt() || 'Avatar'\"\n (click)=\"onClick($event)\"\n (keydown.enter)=\"onClick($event)\"\n (keydown.space)=\"onClick($event)\"\n>\n <!-- ── Avatar shell ────────────────────────────────────────────────── -->\n <span\n class=\"flex items-center justify-center overflow-hidden font-semibold transition-opacity duration-150\"\n [ngClass]=\"[\n sizeClasses(),\n shapeClasses(),\n showImage() ? '' : initialsColorClasses(),\n clickable() ? 'hover:opacity-90 active:opacity-75' : ''\n ]\"\n >\n <!-- Image -->\n @if (showImage()) {\n <img\n class=\"h-full w-full object-cover\"\n [src]=\"src()\"\n [alt]=\"alt() || name()\"\n (error)=\"onImageError()\"\n loading=\"lazy\"\n decoding=\"async\"\n />\n }\n\n <!-- Initials -->\n @if (!showImage() && initials()) {\n <span aria-hidden=\"true\" class=\"leading-none select-none\">\n {{ initials() }}\n </span>\n }\n\n <!-- Generic fallback icon (no image, no name) -->\n @if (showIcon()) {\n <svg\n class=\"h-[55%] w-[55%] opacity-60\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n >\n <path d=\"M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-5.33 0-8 2.67-8 4v1h16v-1c0-1.33-2.67-4-8-4Z\" />\n </svg>\n }\n </span>\n\n <!-- ── Status indicator ───────────────────────────────────────────── -->\n @if (status() !== 'none') {\n <span\n class=\"absolute bottom-0 right-0 block rounded-full ring-2 ring-white dark:ring-gray-900\"\n [ngClass]=\"[statusSizeClasses(), statusColorClass()]\"\n [attr.aria-label]=\"'Status: ' + status()\"\n role=\"img\"\n ></span>\n }\n\n <!-- ── Notification badge ─────────────────────────────────────────── -->\n @if (showBadge()) {\n <span\n class=\"absolute -right-1 -top-1 flex items-center justify-center rounded-full\n bg-red-500 font-bold leading-none text-white tabular-nums\n ring-2 ring-white dark:ring-gray-900\"\n [ngClass]=\"badgeSizeClasses()\"\n aria-live=\"polite\"\n [attr.aria-label]=\"badgeCount() + ' notifications'\"\n >\n {{ displayBadge() }}\n </span>\n }\n\n <!-- ── Verified checkmark ─────────────────────────────────────────── -->\n @if (verified() && !showBadge()) {\n <span\n class=\"absolute bottom-0 right-0 flex items-center justify-center rounded-full\n bg-primary-500 ring-2 ring-white dark:ring-gray-900\"\n [ngClass]=\"size() === 'xs' || size() === 'sm' ? 'h-3.5 w-3.5' :\n size() === 'md' ? 'h-4 w-4' : 'h-5 w-5'\"\n aria-label=\"Verified\"\n role=\"img\"\n >\n <svg\n class=\"h-[65%] w-[65%] text-white\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n >\n <path d=\"M2 6l3 3 5-5\" />\n </svg>\n </span>\n }\n</span>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
package/package.json ADDED
@@ -0,0 +1,42 @@
1
+ {
2
+ "name": "@styloviz/avatar",
3
+ "version": "0.1.1",
4
+ "description": "User avatar with initials fallback, status indicator, size and shape variants.",
5
+ "license": "MIT",
6
+ "author": "sazzad-bs23",
7
+ "homepage": "https://styloviz.dev",
8
+ "repository": {
9
+ "type": "git",
10
+ "url": "git+https://github.com/rhossain/angular-tailwind-dashboard-components.git",
11
+ "directory": "projects/avatar-free"
12
+ },
13
+ "bugs": {
14
+ "url": "https://github.com/rhossain/angular-tailwind-dashboard-components/issues"
15
+ },
16
+ "peerDependencies": {
17
+ "@angular/common": ">=21.0.0",
18
+ "@angular/core": ">=21.0.0"
19
+ },
20
+ "publishConfig": {
21
+ "access": "public"
22
+ },
23
+ "engines": {
24
+ "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
25
+ },
26
+ "sideEffects": false,
27
+ "module": "fesm2022/styloviz-avatar.mjs",
28
+ "typings": "types/styloviz-avatar.d.ts",
29
+ "exports": {
30
+ "./package.json": {
31
+ "default": "./package.json"
32
+ },
33
+ ".": {
34
+ "types": "./types/styloviz-avatar.d.ts",
35
+ "default": "./fesm2022/styloviz-avatar.mjs"
36
+ }
37
+ },
38
+ "type": "module",
39
+ "dependencies": {
40
+ "tslib": "^2.3.0"
41
+ }
42
+ }
package/types/styloviz-avatar.d.ts ADDED
@@ -0,0 +1,97 @@
1
+ import * as _angular_core from '@angular/core';
2
+
3
+ type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
4
+ type AvatarShape = 'circle' | 'rounded' | 'square';
5
+ type AvatarStatus = 'online' | 'offline' | 'away' | 'busy' | 'none';
6
+ /**
7
+ * Palette used when rendering initials — cycles through 10 distinct hues
8
+ * so adjacent avatars in a stack rarely share the same color.
9
+ */
10
+ type AvatarColor = 'auto' | 'primary' | 'violet' | 'rose' | 'amber' | 'teal' | 'sky' | 'indigo' | 'fuchsia' | 'lime' | 'orange';
11
+ /**
12
+ * Avatar — Represents a user or entity with an image, initials, or fallback icon.
13
+ *
14
+ * Features:
15
+ * - Image with graceful fallback → initials → generic icon
16
+ * - 6 sizes × 3 shapes × 10 auto-colored initials palettes
17
+ * - Presence status indicator (online / offline / away / busy)
18
+ * - Optional notification badge (count or dot)
19
+ * - Verified / crown / custom indicator overlay
20
+ * - Click interaction support
21
+ */
22
+ declare class SvAvatarComponent {
23
+ /** URL of the avatar image. When blank or broken, falls back to initials/icon. */
24
+ src: _angular_core.InputSignal<string>;
25
+ /** Full name — used to generate initials and auto-assign a palette color. */
26
+ name: _angular_core.InputSignal<string>;
27
+ /** Alt text for the image; falls back to `name`. */
28
+ alt: _angular_core.InputSignal<string>;
29
+ /** Avatar size. @default 'md' */
30
+ size: _angular_core.InputSignal<AvatarSize>;
31
+ /** Border-radius style. @default 'circle' */
32
+ shape: _angular_core.InputSignal<AvatarShape>;
33
+ /**
34
+ * Presence status indicator rendered as a small dot.
35
+ * Set to `'none'` to hide it entirely. @default 'none'
36
+ */
37
+ status: _angular_core.InputSignal<AvatarStatus>;
38
+ /**
39
+ * Color palette for the initials background.
40
+ * `'auto'` derives a consistent hue from the name string. @default 'auto'
41
+ */
42
+ color: _angular_core.InputSignal<AvatarColor>;
43
+ /**
44
+ * Show a verified checkmark badge in the bottom-right corner.
45
+ * Overridden by `badgeCount` when that is > 0. @default false
46
+ */
47
+ verified: _angular_core.InputSignal<boolean>;
48
+ /**
49
+ * Notification count shown in the top-right corner.
50
+ * Set to 0 to hide. @default 0
51
+ */
52
+ badgeCount: _angular_core.InputSignal<number>;
53
+ /** Cap for the badge count display (e.g. 9 → shows "9+"). @default 9 */
54
+ badgeMax: _angular_core.InputSignal<number>;
55
+ /** Additional CSS classes merged onto the root wrapper. */
56
+ customClass: _angular_core.InputSignal<string>;
57
+ /**
58
+ * Makes the avatar interactive (adds cursor-pointer, hover/focus styles,
59
+ * and emits `avatarClick`). @default false
60
+ */
61
+ clickable: _angular_core.InputSignal<boolean>;
62
+ /** Emitted when the avatar is activated (click or keyboard) and `clickable` is true. */
63
+ avatarClick: _angular_core.OutputEmitterRef<Event>;
64
+ /** Tracks whether the <img> failed to load so we fall back to initials/icon. */
65
+ readonly imgError: _angular_core.WritableSignal<boolean>;
66
+ /** Whether to show the <img> element at all. */
67
+ showImage: _angular_core.Signal<boolean>;
68
+ /** Two-letter initials derived from `name`. */
69
+ initials: _angular_core.Signal<string>;
70
+ /** Resolved palette color. */
71
+ resolvedColor: _angular_core.Signal<"primary" | "violet" | "rose" | "amber" | "teal" | "sky" | "indigo" | "fuchsia" | "lime" | "orange">;
72
+ /** Whether to show the generic SVG icon (no image, no name). */
73
+ showIcon: _angular_core.Signal<boolean>;
74
+ /** Formatted badge count string. */
75
+ displayBadge: _angular_core.Signal<string>;
76
+ showBadge: _angular_core.Signal<boolean>;
77
+ rootClasses: _angular_core.Signal<string>;
78
+ /** Size classes for the avatar shell. */
79
+ sizeClasses: _angular_core.Signal<string>;
80
+ /** Shape / border-radius classes. */
81
+ shapeClasses: _angular_core.Signal<string>;
82
+ /** Initials background + text color classes keyed to the resolved palette. */
83
+ initialsColorClasses: _angular_core.Signal<string>;
84
+ /** Status dot background color. */
85
+ statusColorClass: _angular_core.Signal<string>;
86
+ /** Status dot size keyed to avatar size. */
87
+ statusSizeClasses: _angular_core.Signal<string>;
88
+ /** Badge size keyed to avatar size. */
89
+ badgeSizeClasses: _angular_core.Signal<string>;
90
+ onImageError(): void;
91
+ onClick(event: Event): void;
92
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<SvAvatarComponent, never>;
93
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<SvAvatarComponent, "sv-avatar", never, { "src": { "alias": "src"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "alt": { "alias": "alt"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "verified": { "alias": "verified"; "required": false; "isSignal": true; }; "badgeCount": { "alias": "badgeCount"; "required": false; "isSignal": true; }; "badgeMax": { "alias": "badgeMax"; "required": false; "isSignal": true; }; "customClass": { "alias": "customClass"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; }, { "avatarClick": "avatarClick"; }, never, never, true, never>;
94
+ }
95
+
96
+ export { SvAvatarComponent };
97
+ export type { AvatarColor, AvatarShape, AvatarSize, AvatarStatus };