ng-hub-ui-avatar 22.9.0 → 22.9.2

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2026 Carlos Morcillo
+Copyright (c) 2026 Carlos Morcillo Fernández
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -17,5 +17,5 @@ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALING IN THE
 SOFTWARE.

package/README.md

@@ -12,11 +12,11 @@ A universal avatar component for Angular applications that renders avatars from
 
 ## Documentation and Live Examples
 
-This package is part of [Hub UI](https://hubui.dev/), a collection of Angular component libraries for standalone apps.
+This package is part of [Hub UI](https://hubui.dev/en/), a collection of Angular component libraries for standalone apps.
 
-- Docs: https://hubui.dev/avatar/overview/
-- Live examples: https://hubui.dev/avatar/examples/
-- Hub UI: https://hubui.dev/
+- Docs: https://hubui.dev/en/avatar/overview/
+- Live examples: https://hubui.dev/en/avatar/examples/
+- Hub UI: https://hubui.dev/en/
 
 ## 🧩 Library Family `ng-hub-ui`
 
@@ -72,6 +72,15 @@ Supported avatar sources:
 - Initials (`name`)
 - Text value (`value`)
 
+> **These three sources contact a third party.** `secure.gravatar.com`, `api.github.com` and
+> `graph.facebook.com` are reached from the visitor's browser, so those services see the
+> visitor's IP address — and Gravatar additionally receives a hash of the email address you
+> pass it, which is enough to correlate a person across every site that uses Gravatar. That is
+> not a defect, it is what "resolve an avatar from Gravatar" means; but it is a decision worth
+> making deliberately rather than discovering in a network tab. If you cannot send that data,
+> use the custom image, initials or text sources, which never leave your own origin.
+
+
 Fallback uses a source priority order. By default, the component tries the supported sources in their configured order until one succeeds.
 
 > This project is a fork of [ngx-avatars](https://github.com/Heatmanofurioso/ngx-avatars), which itself continued the original avatar work. This package adapts and maintains the component for modern Angular applications.

package/fesm2022/ng-hub-ui-avatar.mjs

@@ -47,10 +47,10 @@ class AvatarConfigService {
             return this.userConfig.disableSrcCache;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: AvatarConfigService, deps: [{ token: AVATAR_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: AvatarConfigService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AvatarConfigService, deps: [{ token: AVATAR_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AvatarConfigService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: AvatarConfigService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AvatarConfigService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
@@ -156,10 +156,10 @@ class AvatarService {
     getSourcePriority(sourceType) {
         return this.avatarSources.indexOf(sourceType);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: AvatarService, deps: [{ token: i1.HttpClient }, { token: AvatarConfigService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: AvatarService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AvatarService, deps: [{ token: i1.HttpClient }, { token: AvatarConfigService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AvatarService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: AvatarService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AvatarService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i1.HttpClient }, { type: AvatarConfigService }] });
@@ -357,10 +357,10 @@ class SourceFactory {
     newInstance(sourceType, sourceValue) {
         return new this.sources[sourceType](sourceValue);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SourceFactory, deps: [{ token: AvatarConfigService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SourceFactory, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SourceFactory, deps: [{ token: AvatarConfigService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SourceFactory, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SourceFactory, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SourceFactory, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: AvatarConfigService }] });
@@ -767,8 +767,8 @@ class AvatarComponent {
     removeSource(sourceType) {
         this.sources = this.sources.filter((source) => source.sourceType !== sourceType);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: AvatarComponent, deps: [{ token: SourceFactory }, { token: AvatarService }, { token: i3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: AvatarComponent, isStandalone: true, selector: "hub-avatar", inputs: { round: { classPropertyName: "round", publicName: "round", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, textSizeRatio: { classPropertyName: "textSizeRatio", publicName: "textSizeRatio", isSignal: true, isRequired: false, transformFunction: null }, bgColor: { classPropertyName: "bgColor", publicName: "bgColor", isSignal: true, isRequired: false, transformFunction: null }, fgColor: { classPropertyName: "fgColor", publicName: "fgColor", isSignal: true, isRequired: false, transformFunction: null }, borderColor: { classPropertyName: "borderColor", publicName: "borderColor", isSignal: true, isRequired: false, transformFunction: null }, autoColor: { classPropertyName: "autoColor", publicName: "autoColor", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, cornerRadius: { classPropertyName: "cornerRadius", publicName: "cornerRadius", isSignal: true, isRequired: false, transformFunction: null }, facebook: { classPropertyName: "facebook", publicName: "facebookId", isSignal: true, isRequired: false, transformFunction: null }, gravatar: { classPropertyName: "gravatar", publicName: "gravatarId", isSignal: true, isRequired: false, transformFunction: null }, github: { classPropertyName: "github", publicName: "githubId", isSignal: true, isRequired: false, transformFunction: null }, custom: { classPropertyName: "custom", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, customAlt: { classPropertyName: "customAlt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, referrerpolicy: { classPropertyName: "referrerpolicy", publicName: "referrerpolicy", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, initialsSize: { classPropertyName: "initialsSize", publicName: "initialsSize", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, badgeColor: { classPropertyName: "badgeColor", publicName: "badgeColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickOnAvatar: "clickOnAvatar" }, host: { properties: { "attr.data-badge-color": "badgeColor() || null", "style.--hub-avatar-badge-color": "badgeColorVar()", "style.--hub-avatar-size": "avatarSizePx" } }, viewQueries: [{ propertyName: "customContentRef", first: true, predicate: ["customContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AvatarComponent, deps: [{ token: SourceFactory }, { token: AvatarService }, { token: i3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AvatarComponent, isStandalone: true, selector: "hub-avatar", inputs: { round: { classPropertyName: "round", publicName: "round", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, textSizeRatio: { classPropertyName: "textSizeRatio", publicName: "textSizeRatio", isSignal: true, isRequired: false, transformFunction: null }, bgColor: { classPropertyName: "bgColor", publicName: "bgColor", isSignal: true, isRequired: false, transformFunction: null }, fgColor: { classPropertyName: "fgColor", publicName: "fgColor", isSignal: true, isRequired: false, transformFunction: null }, borderColor: { classPropertyName: "borderColor", publicName: "borderColor", isSignal: true, isRequired: false, transformFunction: null }, autoColor: { classPropertyName: "autoColor", publicName: "autoColor", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, cornerRadius: { classPropertyName: "cornerRadius", publicName: "cornerRadius", isSignal: true, isRequired: false, transformFunction: null }, facebook: { classPropertyName: "facebook", publicName: "facebookId", isSignal: true, isRequired: false, transformFunction: null }, gravatar: { classPropertyName: "gravatar", publicName: "gravatarId", isSignal: true, isRequired: false, transformFunction: null }, github: { classPropertyName: "github", publicName: "githubId", isSignal: true, isRequired: false, transformFunction: null }, custom: { classPropertyName: "custom", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, customAlt: { classPropertyName: "customAlt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, referrerpolicy: { classPropertyName: "referrerpolicy", publicName: "referrerpolicy", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, initialsSize: { classPropertyName: "initialsSize", publicName: "initialsSize", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, badgeColor: { classPropertyName: "badgeColor", publicName: "badgeColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickOnAvatar: "clickOnAvatar" }, host: { properties: { "attr.data-badge-color": "badgeColor() || null", "style.--hub-avatar-badge-color": "badgeColorVar()", "style.--hub-avatar-size": "avatarSizePx" } }, viewQueries: [{ propertyName: "customContentRef", first: true, predicate: ["customContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
 		<div
 			(click)="onAvatarClicked()"
 			(keydown.enter)="onAvatarKeydown($event)"
@@ -813,7 +813,7 @@ class AvatarComponent {
 		}
 	`, isInline: true, styles: [":root,:host{--hub-avatar-size: 50px;--hub-avatar-overflow: hidden;--hub-avatar-border-radius-round: 50%;--hub-avatar-border-radius-square: var(--hub-ref-radius-sm, .25rem);--hub-avatar-border-radius: var( --hub-avatar-border-radius-round, var(--hub-avatar-border-radius-square, .25rem) );--hub-avatar-border-width-default: var(--hub-ref-border-width, 1px);--hub-avatar-border-width: 0;--hub-avatar-border-color: transparent;--hub-avatar-accent: var(--hub-sys-color-primary, #0d6efd);--hub-avatar-accent-emphasis: color-mix(in oklch, var(--hub-avatar-accent) 80%, var(--hub-sys-color-ink, #212529));--hub-avatar-accent-subtle: color-mix(in oklch, var(--hub-avatar-accent) 12%, var(--hub-sys-surface-page, #fff));--hub-avatar-accent-on: oklch(from var(--hub-avatar-accent) clamp(0, (.62 - l) * 1000, 1) 0 h);--hub-avatar-fg-color: var(--hub-avatar-accent-on, var(--hub-ref-color-white, #fff));--hub-avatar-bg-color: var(--hub-avatar-accent, var(--hub-sys-color-primary, #0d6efd));--hub-avatar-font-family: var( --hub-ref-font-family-base, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif );--hub-avatar-font-weight: var(--hub-ref-font-weight-base, 400);--hub-avatar-font-size: calc(var(--hub-avatar-size, 50px) / 3);--hub-avatar-line-height: var(--hub-avatar-size, 50px);--hub-avatar-text-transform: uppercase;--hub-avatar-text-align: center;--hub-avatar-object-fit: cover;--hub-avatar-content-padding: calc(var(--hub-avatar-size, 50px) * .2);--hub-avatar-content-icon-size: calc(var(--hub-avatar-size, 50px) * .55);--hub-avatar-badge-size: calc(var(--hub-avatar-size, 50px) * .28);--hub-avatar-badge-offset: 0px;--hub-avatar-badge-ring-width: max(2px, calc(var(--hub-avatar-size, 50px) * .05));--hub-avatar-badge-ring-color: var(--hub-sys-surface-page, #fff);--hub-avatar-badge-color: var(--hub-sys-color-secondary, #6c757d);--hub-avatar-badge-text-color: var(--hub-ref-color-white, #fff);--hub-avatar-badge-font-size: calc(var(--hub-avatar-size, 50px) * .22);--hub-avatar-badge-padding: calc(var(--hub-avatar-size, 50px) * .08);--hub-avatar-group-overlap: calc(var(--hub-avatar-size, 50px) * .3);--hub-avatar-group-ring-width: max(2px, calc(var(--hub-avatar-size, 50px) * .04));--hub-avatar-group-ring-color: var(--hub-sys-surface-page, #fff)}:host{display:inline-block;position:relative;border-radius:var(--hub-avatar-border-radius, 50%)}.avatar-container{width:var(--hub-avatar-size, 50px);height:var(--hub-avatar-size, 50px);border-radius:var(--hub-avatar-border-radius, 50%);overflow:var(--hub-avatar-overflow, hidden)}.avatar-content{width:100%;height:100%;max-width:100%;box-sizing:border-box;border-radius:var(--hub-avatar-border-radius, 50%);border:var(--hub-avatar-border-width, 0) solid var(--hub-avatar-border-color, transparent);color:var(--hub-avatar-fg-color, var(--hub-ref-color-white, #fff));background-color:var(--hub-avatar-bg-color, var(--hub-sys-surface-page, #fff));font-family:var(--hub-avatar-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);font-size:var(--hub-avatar-font-size, calc(var(--hub-avatar-size, 50px) / 3));font-weight:var(--hub-avatar-font-weight, var(--hub-ref-font-weight-base, 400));line-height:var(--hub-avatar-line-height, var(--hub-avatar-size, 50px));text-transform:var(--hub-avatar-text-transform, uppercase);text-align:var(--hub-avatar-text-align, center)}div.avatar-content{display:flex;align-items:center;justify-content:center}img.avatar-content{display:block;object-fit:var(--hub-avatar-object-fit, cover);background-color:transparent}.hub-avatar__custom{display:none}.hub-avatar--custom .hub-avatar__custom{display:flex;align-items:center;justify-content:center;width:100%;height:100%;box-sizing:border-box;padding:var(--hub-avatar-content-padding, calc(var(--hub-avatar-size, 50px) * .2));border-radius:inherit;overflow:hidden;background-color:var(--hub-avatar-bg-color, var(--hub-sys-color-primary, #0d6efd));color:var(--hub-avatar-fg-color, var(--hub-ref-color-white, #fff));font-size:var(--hub-avatar-content-icon-size, calc(var(--hub-avatar-size, 50px) * .55));line-height:1}.hub-avatar--custom .hub-avatar__custom>*{line-height:1}.hub-avatar--custom .hub-avatar__custom ::ng-deep svg,.hub-avatar--custom .hub-avatar__custom ::ng-deep img{display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain}.hub-avatar__badge{position:absolute;inset-block-end:var(--hub-avatar-badge-offset, 0px);inset-inline-end:var(--hub-avatar-badge-offset, 0px);box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;background:var(--hub-avatar-badge-color, var(--hub-sys-color-secondary, #6c757d));color:var(--hub-avatar-badge-text-color, var(--hub-ref-color-white, #fff));box-shadow:0 0 0 var(--hub-avatar-badge-ring-width, 2px) var(--hub-avatar-badge-ring-color, var(--hub-sys-surface-page, #fff))}.hub-avatar__badge--dot{width:var(--hub-avatar-badge-size, calc(var(--hub-avatar-size, 50px) * .28));height:var(--hub-avatar-badge-size, calc(var(--hub-avatar-size, 50px) * .28));border-radius:50%}.hub-avatar__badge--label{min-width:var(--hub-avatar-badge-size, calc(var(--hub-avatar-size, 50px) * .28));height:var(--hub-avatar-badge-size, calc(var(--hub-avatar-size, 50px) * .28));padding-inline:var(--hub-avatar-badge-padding, calc(var(--hub-avatar-size, 50px) * .08));border-radius:var(--hub-sys-radius-pill, 50rem);font-family:var(--hub-avatar-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);font-size:var(--hub-avatar-badge-font-size, calc(var(--hub-avatar-size, 50px) * .22));font-weight:var(--hub-ref-font-weight-bold, 700);line-height:1}:host([data-badge-color=primary]){--hub-avatar-badge-color: var(--hub-sys-color-primary)}:host(.hub-avatar--primary){--hub-avatar-accent: var(--hub-sys-color-primary)}:host([data-badge-color=secondary]){--hub-avatar-badge-color: var(--hub-sys-color-secondary)}:host(.hub-avatar--secondary){--hub-avatar-accent: var(--hub-sys-color-secondary)}:host([data-badge-color=success]){--hub-avatar-badge-color: var(--hub-sys-color-success)}:host(.hub-avatar--success){--hub-avatar-accent: var(--hub-sys-color-success)}:host([data-badge-color=danger]){--hub-avatar-badge-color: var(--hub-sys-color-danger)}:host(.hub-avatar--danger){--hub-avatar-accent: var(--hub-sys-color-danger)}:host([data-badge-color=warning]){--hub-avatar-badge-color: var(--hub-sys-color-warning)}:host(.hub-avatar--warning){--hub-avatar-accent: var(--hub-sys-color-warning)}:host([data-badge-color=info]){--hub-avatar-badge-color: var(--hub-sys-color-info)}:host(.hub-avatar--info){--hub-avatar-accent: var(--hub-sys-color-info)}:host([data-badge-color=neutral]){--hub-avatar-badge-color: var(--hub-sys-color-neutral)}:host(.hub-avatar--neutral){--hub-avatar-accent: var(--hub-sys-color-neutral)}:host([data-badge-color=light]){--hub-avatar-badge-color: var(--hub-sys-color-light)}:host(.hub-avatar--light){--hub-avatar-accent: var(--hub-sys-color-light)}:host([data-badge-color=dark]){--hub-avatar-badge-color: var(--hub-sys-color-dark)}:host(.hub-avatar--dark){--hub-avatar-accent: var(--hub-sys-color-dark)}:host([data-badge-color=warning]),:host([data-badge-color=light]){--hub-avatar-badge-text-color: var(--hub-sys-text-primary, #212529)}.hub-avatar-group{display:inline-flex;align-items:center}.hub-avatar-group hub-avatar{box-shadow:0 0 0 var(--hub-avatar-group-ring-width, 2px) var(--hub-avatar-group-ring-color, var(--hub-sys-surface-page, #fff))}.hub-avatar-group hub-avatar+hub-avatar{margin-inline-start:calc(-1 * var(--hub-avatar-group-overlap, 15px))}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: AvatarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AvatarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'hub-avatar', standalone: true, template: `
 		<div
@@ -892,11 +892,11 @@ class AvatarModule {
             ]
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: AvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.1", ngImport: i0, type: AvatarModule, imports: [AvatarComponent], exports: [AvatarComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: AvatarModule });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: AvatarModule, imports: [AvatarComponent], exports: [AvatarComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AvatarModule });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: AvatarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AvatarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [AvatarComponent],

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ng-hub-ui-avatar",
   "description": "A universal avatar component for Angular applications that fetches / generates avatar based on the information you have about the user. Supports initials, Gravatar integration, custom images and styling options. Perfect for user profiles and comment systems.",
-  "version": "22.9.0",
+  "version": "22.9.2",
   "keywords": [
     "angular",
     "avatar",

package/src/lib/styles/mixins/_avatar-theme.scss

@@ -1,190 +0,0 @@
-// ─────────────────────────────────────────────────────────────────────────
-// ng-hub-ui-avatar — consumer SCSS helpers
-// ─────────────────────────────────────────────────────────────────────────
-//
-//   @use 'ng-hub-ui-avatar/styles/mixins/avatar-theme' as avatar;
-//
-//   • hub-avatar-theme()          — override any --hub-avatar-* token in one call
-//   • hub-avatar-color-variants() — emit avatar + badge colour variants in a loop
-//   • hub-avatar-badge-color()    — set the badge colour from a single value
-//
-// Token-based and self-contained (no Bootstrap dependency).
-
-// Default semantic colour map → design-system `--hub-sys-color-*` tokens.
-// Pass your own map (or extend this one) to `hub-avatar-color-variants()`.
-// Mirrors the open accent set (9 canonical variants); each entry feeds the
-// avatar's `--hub-avatar-accent` slot, so the circle fill and its legible
-// foreground (`-on`) follow automatically. Add custom colours (e.g. `brand`) to
-// this map — or pass your own map — and they work the same way.
-$hub-avatar-semantic-colors: (
-	'primary': var(--hub-sys-color-primary),
-	'secondary': var(--hub-sys-color-secondary),
-	'success': var(--hub-sys-color-success),
-	'danger': var(--hub-sys-color-danger),
-	'warning': var(--hub-sys-color-warning),
-	'info': var(--hub-sys-color-info),
-	'neutral': var(--hub-sys-color-neutral),
-	'light': var(--hub-sys-color-light),
-	'dark': var(--hub-sys-color-dark)
-) !default;
-
-// ── hub-avatar-color-variants ────────────────────────────────────────────────
-// In ONE loop over `$colors`, emit a coloured-circle variant of the AVATAR and a
-// coloured variant of its BADGE for every entry. The avatar circle re-bases the
-// single `--hub-avatar-accent` slot (not `--hub-avatar-bg-color` directly), so
-// the fill and its legible foreground (`--hub-avatar-accent-on`) follow from one
-// value — light accents get dark text automatically. The nine canonical colours
-// already work out of the box; use this to (re)emit them in your own global CSS,
-// or to register custom colours.
-//
-// @example
-//   @include avatar.hub-avatar-color-variants();                          // the 9 semantic
-//   @include avatar.hub-avatar-color-variants(('brand': var(--brand)));   // custom colour
-//
-//   <hub-avatar class="hub-avatar--brand">    → brand-coloured circle
-//   <hub-avatar badge badgeColor="brand">     → brand-coloured badge
-@mixin hub-avatar-color-variants($colors: $hub-avatar-semantic-colors) {
-	@each $name, $color in $colors {
-		hub-avatar.hub-avatar--#{$name} {
-			--hub-avatar-accent: #{$color};
-		}
-
-		hub-avatar[data-badge-color='#{$name}'] {
-			--hub-avatar-badge-color: #{$color};
-		}
-	}
-}
-
-// ── hub-avatar-badge-color ───────────────────────────────────────────────────
-// Set the badge colour from a single value (a token or a literal).
-@mixin hub-avatar-badge-color($color) {
-	--hub-avatar-badge-color: #{$color};
-}
-
-// ── hub-avatar-theme ─────────────────────────────────────────────────────────
-// Override any of the `--hub-avatar-*` design tokens in a single include. Every
-// parameter is OPTIONAL and defaults to `null`: only the parameters you pass are
-// emitted, so the rest keep the component's defaults.
-//
-// @example
-//   hub-avatar.brand {
-//     @include avatar.hub-avatar-theme(
-//       $size: 64px, $bg: #ede9fe, $fg: #5b21b6, $badge-color: #f43f5e
-//     );
-//   }
-//
-// scss-docs-start hub-avatar-theme
-@mixin hub-avatar-theme(
-	// ── Shape & surface ──
-	$size: null,
-	$border-radius: null,
-	$border-width: null,
-	$border-color: null,
-	$bg: null,
-	$fg: null,
-	$object-fit: null,
-	// ── Typography (initials) ──
-	$font-family: null,
-	$font-weight: null,
-	$font-size: null,
-	$text-transform: null,
-	// ── Projected custom content ──
-	$content-padding: null,
-	$content-icon-size: null,
-	// ── Corner badge (dot / labelled) ──
-	$badge-size: null,
-	$badge-offset: null,
-	$badge-ring-width: null,
-	$badge-ring-color: null,
-	$badge-color: null,
-	$badge-text-color: null,
-	$badge-font-size: null,
-	$badge-padding: null,
-	// ── Stacked group ──
-	$group-overlap: null,
-	$group-ring-width: null,
-	$group-ring-color: null
-) {
-	// Shape & surface
-	@if $size != null {
-		--hub-avatar-size: #{$size};
-	}
-	@if $border-radius != null {
-		--hub-avatar-border-radius: #{$border-radius};
-	}
-	@if $border-width != null {
-		--hub-avatar-border-width: #{$border-width};
-	}
-	@if $border-color != null {
-		--hub-avatar-border-color: #{$border-color};
-	}
-	@if $bg != null {
-		--hub-avatar-bg-color: #{$bg};
-	}
-	@if $fg != null {
-		--hub-avatar-fg-color: #{$fg};
-	}
-	@if $object-fit != null {
-		--hub-avatar-object-fit: #{$object-fit};
-	}
-
-	// Typography
-	@if $font-family != null {
-		--hub-avatar-font-family: #{$font-family};
-	}
-	@if $font-weight != null {
-		--hub-avatar-font-weight: #{$font-weight};
-	}
-	@if $font-size != null {
-		--hub-avatar-font-size: #{$font-size};
-	}
-	@if $text-transform != null {
-		--hub-avatar-text-transform: #{$text-transform};
-	}
-
-	// Projected custom content
-	@if $content-padding != null {
-		--hub-avatar-content-padding: #{$content-padding};
-	}
-	@if $content-icon-size != null {
-		--hub-avatar-content-icon-size: #{$content-icon-size};
-	}
-
-	// Corner badge
-	@if $badge-size != null {
-		--hub-avatar-badge-size: #{$badge-size};
-	}
-	@if $badge-offset != null {
-		--hub-avatar-badge-offset: #{$badge-offset};
-	}
-	@if $badge-ring-width != null {
-		--hub-avatar-badge-ring-width: #{$badge-ring-width};
-	}
-	@if $badge-ring-color != null {
-		--hub-avatar-badge-ring-color: #{$badge-ring-color};
-	}
-	@if $badge-color != null {
-		--hub-avatar-badge-color: #{$badge-color};
-	}
-	@if $badge-text-color != null {
-		--hub-avatar-badge-text-color: #{$badge-text-color};
-	}
-	@if $badge-font-size != null {
-		--hub-avatar-badge-font-size: #{$badge-font-size};
-	}
-	@if $badge-padding != null {
-		--hub-avatar-badge-padding: #{$badge-padding};
-	}
-
-	// Stacked group
-	@if $group-overlap != null {
-		--hub-avatar-group-overlap: #{$group-overlap};
-	}
-	@if $group-ring-width != null {
-		--hub-avatar-group-ring-width: #{$group-ring-width};
-	}
-	@if $group-ring-color != null {
-		--hub-avatar-group-ring-color: #{$group-ring-color};
-	}
-}
-// scss-docs-end hub-avatar-theme