@ifsworld/granite-components 12.3.4 → 13.0.1

package/fesm2022/ifsworld-granite-components.mjs

@@ -3982,6 +3982,139 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
                 }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
 
+class GraniteCustomAvatarStatusDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteCustomAvatarStatusDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.4", type: GraniteCustomAvatarStatusDirective, selector: "[graniteCustomAvatarStatus]", inputs: { graniteCustomAvatarStatus: "graniteCustomAvatarStatus" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteCustomAvatarStatusDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[graniteCustomAvatarStatus]',
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }], propDecorators: { graniteCustomAvatarStatus: [{
+                type: Input
+            }] } });
+
+const AVATAR_DEFAULT_STATUS = {
+    AVAILABLE: 'Available',
+    DO_NOT_DISTURB: 'DoNotDisturb',
+    DISABLED: 'Disabled',
+    AWAY: 'Away',
+};
+
+class GraniteAvatarDefaultStatusComponent {
+    constructor() {
+        this.AVATAR_STATUS = AVATAR_DEFAULT_STATUS;
+    }
+    get statusClass() {
+        switch (this.status) {
+            case this.AVATAR_STATUS.AVAILABLE:
+                return 'available';
+            case this.AVATAR_STATUS.DO_NOT_DISTURB:
+                return 'do-not-disturb';
+            case this.AVATAR_STATUS.DISABLED: {
+                return 'disabled';
+            }
+            case this.AVATAR_STATUS.AWAY: {
+                return 'away';
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteAvatarDefaultStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: GraniteAvatarDefaultStatusComponent, selector: "granite-avatar-default-status", inputs: { status: "status" }, host: { properties: { "class": "this.statusClass" }, classAttribute: "granite-avatar-default-status" }, ngImport: i0, template: '', isInline: true, styles: [":host{display:block;width:.5rem;height:.5rem;outline:.125rem solid var(--granite-color-background);border-radius:100%}:host.available{background:var(--granite-color-signal-ok)}:host.do-not-disturb{background:var(--granite-color-signal-failure)}:host.disabled{background:var(--granite-color-signal-neutral)}:host.away{background:var(--granite-color-signal-warning)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteAvatarDefaultStatusComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'granite-avatar-default-status', host: {
+                        class: 'granite-avatar-default-status',
+                    }, template: '', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;width:.5rem;height:.5rem;outline:.125rem solid var(--granite-color-background);border-radius:100%}:host.available{background:var(--granite-color-signal-ok)}:host.do-not-disturb{background:var(--granite-color-signal-failure)}:host.disabled{background:var(--granite-color-signal-neutral)}:host.away{background:var(--granite-color-signal-warning)}\n"] }]
+        }], propDecorators: { status: [{
+                type: Input
+            }], statusClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class GraniteEmptyAvatarComponent {
+    constructor() {
+        this._firstNameLetter = '';
+        this._firstSurnameLetter = '';
+    }
+    ngOnChanges(changes) {
+        if (changes.name) {
+            this._firstNameLetter =
+                changes.name.currentValue?.charAt(0)?.toUpperCase() || '';
+        }
+        if (changes.surname) {
+            this._firstSurnameLetter =
+                changes.surname.currentValue?.charAt(0)?.toUpperCase() || '';
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteEmptyAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: GraniteEmptyAvatarComponent, selector: "granite-empty-avatar", inputs: { name: "name", surname: "surname" }, host: { classAttribute: "granite-empty-avatar" }, usesOnChanges: true, ngImport: i0, template: `
+    <div class="no-profile-avatar">
+      <span
+        data-fnd="no-profile-avatar-initials"
+        class="no-profile-avatar-initials"
+        >{{ _firstNameLetter }}{{ _firstSurnameLetter }}</span
+      >
+    </div>
+  `, isInline: true, styles: [":host{width:inherit;height:inherit}:host .no-profile-avatar{display:flex;width:inherit;height:inherit;border-radius:100%;background:var(--granite-color-background-info);justify-content:center;align-items:center}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteEmptyAvatarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'granite-empty-avatar', host: {
+                        class: 'granite-empty-avatar',
+                    }, template: `
+    <div class="no-profile-avatar">
+      <span
+        data-fnd="no-profile-avatar-initials"
+        class="no-profile-avatar-initials"
+        >{{ _firstNameLetter }}{{ _firstSurnameLetter }}</span
+      >
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{width:inherit;height:inherit}:host .no-profile-avatar{display:flex;width:inherit;height:inherit;border-radius:100%;background:var(--granite-color-background-info);justify-content:center;align-items:center}\n"] }]
+        }], propDecorators: { name: [{
+                type: Input
+            }], surname: [{
+                type: Input
+            }] } });
+
+class GraniteAvatarComponent extends ContactsTriggerDataComponent {
+    ngAfterContentChecked() {
+        this._customStatusDirectives = this._customStatusesQueryList
+            .toArray()
+            .reduce((directives, next) => {
+            return {
+                ...directives,
+                [next.graniteCustomAvatarStatus]: next.templateRef,
+            };
+        }, {});
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteAvatarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: GraniteAvatarComponent, selector: "granite-avatar", inputs: { name: "name", surname: "surname", avatar: "avatar", status: "status" }, host: { classAttribute: "granite-avatar" }, queries: [{ propertyName: "_customStatusesQueryList", predicate: GraniteCustomAvatarStatusDirective }], exportAs: ["graniteAvatar"], usesInheritance: true, ngImport: i0, template: "<img\n  data-fnd=\"profile-avatar\"\n  *ngIf=\"avatar; else noProfileAvatar\"\n  [src]=\"avatar\"\n  alt=\"avatar\"\n  class=\"profile-avatar profile-size\"\n/>\n\n<ng-template #noProfileAvatar>\n  <granite-empty-avatar\n    class=\"profile-size\"\n    [name]=\"name\"\n    [surname]=\"surname\"\n  ></granite-empty-avatar>\n</ng-template>\n\n@if (status && _customStatusDirectives[status]) {\n  <ng-container *ngTemplateOutlet=\"customStatus\"></ng-container>\n} @else if (status) {\n  <ng-container *ngTemplateOutlet=\"defaultStatus\"></ng-container>\n}\n\n<ng-template #defaultStatus>\n  <granite-avatar-default-status\n    class=\"profile-default-status\"\n    [attr.data-fnd]=\"status + '-status'\"\n    [status]=\"status\"\n  ></granite-avatar-default-status>\n</ng-template>\n\n<ng-template #customStatus>\n  <div\n    [attr.data-fnd]=\"'profile-status-custom'\"\n    [class]=\"'profile-status-' + status\"\n    class=\"profile-custom-status\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"_customStatusDirectives[status]\"\n    ></ng-container>\n  </div>\n</ng-template>\n", styles: [":host .profile-default-status,:host .profile-custom-status{position:absolute;inset-inline-end:0;bottom:0}:host{display:block;position:relative;width:1.5rem;height:1.5rem;color:var(--granite-color-signal-info);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);object-fit:contain}:host .profile{display:flex;align-items:center;margin-bottom:var(--granite-spacing-8);gap:var(--granite-spacing-4)}:host .profile-avatar{width:inherit;height:inherit;border-radius:50%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GraniteAvatarDefaultStatusComponent, selector: "granite-avatar-default-status", inputs: ["status"] }, { kind: "component", type: GraniteEmptyAvatarComponent, selector: "granite-empty-avatar", inputs: ["name", "surname"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteAvatarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'granite-avatar', exportAs: 'graniteAvatar', host: {
+                        class: 'granite-avatar',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<img\n  data-fnd=\"profile-avatar\"\n  *ngIf=\"avatar; else noProfileAvatar\"\n  [src]=\"avatar\"\n  alt=\"avatar\"\n  class=\"profile-avatar profile-size\"\n/>\n\n<ng-template #noProfileAvatar>\n  <granite-empty-avatar\n    class=\"profile-size\"\n    [name]=\"name\"\n    [surname]=\"surname\"\n  ></granite-empty-avatar>\n</ng-template>\n\n@if (status && _customStatusDirectives[status]) {\n  <ng-container *ngTemplateOutlet=\"customStatus\"></ng-container>\n} @else if (status) {\n  <ng-container *ngTemplateOutlet=\"defaultStatus\"></ng-container>\n}\n\n<ng-template #defaultStatus>\n  <granite-avatar-default-status\n    class=\"profile-default-status\"\n    [attr.data-fnd]=\"status + '-status'\"\n    [status]=\"status\"\n  ></granite-avatar-default-status>\n</ng-template>\n\n<ng-template #customStatus>\n  <div\n    [attr.data-fnd]=\"'profile-status-custom'\"\n    [class]=\"'profile-status-' + status\"\n    class=\"profile-custom-status\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"_customStatusDirectives[status]\"\n    ></ng-container>\n  </div>\n</ng-template>\n", styles: [":host .profile-default-status,:host .profile-custom-status{position:absolute;inset-inline-end:0;bottom:0}:host{display:block;position:relative;width:1.5rem;height:1.5rem;color:var(--granite-color-signal-info);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);object-fit:contain}:host .profile{display:flex;align-items:center;margin-bottom:var(--granite-spacing-8);gap:var(--granite-spacing-4)}:host .profile-avatar{width:inherit;height:inherit;border-radius:50%}\n"] }]
+        }], propDecorators: { name: [{
+                type: Input
+            }], surname: [{
+                type: Input
+            }], avatar: [{
+                type: Input
+            }], status: [{
+                type: Input
+            }], _customStatusesQueryList: [{
+                type: ContentChildren,
+                args: [GraniteCustomAvatarStatusDirective]
+            }] } });
+
 class GraniteContactsProfileComponent {
     ngOnChanges(changes) {
         const profile = changes.profile?.currentValue;
@@ -3993,13 +4126,13 @@ class GraniteContactsProfileComponent {
         this._initials = name[0].toUpperCase() + surname[0].toUpperCase();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteContactsProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: GraniteContactsProfileComponent, selector: "granite-contacts-profile", inputs: { profile: "profile", profileClass: "profileClass" }, host: { classAttribute: "granite-contacts-profile" }, usesOnChanges: true, ngImport: i0, template: "<div [class]=\"profileClass\" data-fnd=\"profile\" class=\"profile\">\n  <img\n    data-fnd=\"profile-avatar\"\n    *ngIf=\"profile?.avatar; else noProfileAvatar\"\n    [src]=\"profile?.avatar\"\n    alt=\"profile avatar\"\n    class=\"profile-avatar\"\n  />\n\n  <ng-template #noProfileAvatar>\n    <div class=\"no-profile-avatar\">\n      <span\n        data-fnd=\"no-profile-avatar-initials\"\n        class=\"no-profile-avatar-initials\"\n        >{{ _initials }}</span\n      >\n    </div>\n  </ng-template>\n\n  <div class=\"profile-info\">\n    <p data-fnd=\"profile-info-names\" class=\"profile-info-names\">\n      {{ profile?.name }} {{ profile?.surname }}\n    </p>\n    <p data-fnd=\"profile-info-job-title\" class=\"profile-info-job-title\">\n      {{ profile?.jobTitle }}\n    </p>\n  </div>\n</div>\n", styles: [".profile{display:flex;align-items:center;margin-bottom:var(--granite-spacing-8);gap:var(--granite-spacing-4)}.profile-avatar{width:3rem;height:3rem;border-radius:50%;object-fit:cover}.profile-info{display:flex;flex-direction:column;gap:var(--granite-spacing-8)}.profile-info-names{color:var(--granite-color-text);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);margin:0}.profile-info-job-title{color:var(--granite-color-text-hint);font-size:var(--granite-font-size-body-small);margin:0}.no-profile-avatar{display:flex;width:3rem;height:3rem;border-radius:360px;background:var(--granite-color-background-info);justify-content:center;align-items:center}.no-profile-avatar-initials{font-size:var(--granite-font-size-micro);color:var(--granite-color-signal-info);font-weight:var(--granite-font-weight-regular)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: GraniteContactsProfileComponent, selector: "granite-contacts-profile", inputs: { profile: "profile", profileClass: "profileClass" }, host: { classAttribute: "granite-contacts-profile" }, usesOnChanges: true, ngImport: i0, template: "<div [class]=\"profileClass\" data-fnd=\"profile\" class=\"profile\">\n  <granite-avatar\n    data-fnd=\"profile-avatar\"\n    class=\"profile-avatar\"\n    [name]=\"profile.name\"\n    [surname]=\"profile.surname\"\n    [avatar]=\"profile.avatar\"\n  ></granite-avatar>\n\n  <ng-template #noProfileAvatar>\n    <div class=\"no-profile-avatar\">\n      <span\n        data-fnd=\"no-profile-avatar-initials\"\n        class=\"no-profile-avatar-initials\"\n        >{{ _initials }}</span\n      >\n    </div>\n  </ng-template>\n\n  <div class=\"profile-info\">\n    <p data-fnd=\"profile-info-names\" class=\"profile-info-names\">\n      {{ profile?.name }} {{ profile?.surname }}\n    </p>\n    <p data-fnd=\"profile-info-job-title\" class=\"profile-info-job-title\">\n      {{ profile?.jobTitle }}\n    </p>\n  </div>\n</div>\n", styles: [".profile{display:flex;align-items:center;margin-bottom:var(--granite-spacing-8);gap:var(--granite-spacing-4)}.profile-avatar{width:3rem;height:3rem;border-radius:50%}.profile-info{display:flex;flex-direction:column;gap:var(--granite-spacing-8)}.profile-info-names{color:var(--granite-color-text);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);margin:0}.profile-info-job-title{color:var(--granite-color-text-hint);font-size:var(--granite-font-size-body-small);margin:0}.no-profile-avatar{display:flex;width:3rem;height:3rem;border-radius:360px;background:var(--granite-color-background-info);justify-content:center;align-items:center}.no-profile-avatar-initials{font-size:var(--granite-font-size-micro);color:var(--granite-color-signal-info);font-weight:var(--granite-font-weight-regular)}\n"], dependencies: [{ kind: "component", type: GraniteAvatarComponent, selector: "granite-avatar", inputs: ["name", "surname", "avatar", "status"], exportAs: ["graniteAvatar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteContactsProfileComponent, decorators: [{
             type: Component,
             args: [{ selector: 'granite-contacts-profile', host: {
                         class: 'granite-contacts-profile',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"profileClass\" data-fnd=\"profile\" class=\"profile\">\n  <img\n    data-fnd=\"profile-avatar\"\n    *ngIf=\"profile?.avatar; else noProfileAvatar\"\n    [src]=\"profile?.avatar\"\n    alt=\"profile avatar\"\n    class=\"profile-avatar\"\n  />\n\n  <ng-template #noProfileAvatar>\n    <div class=\"no-profile-avatar\">\n      <span\n        data-fnd=\"no-profile-avatar-initials\"\n        class=\"no-profile-avatar-initials\"\n        >{{ _initials }}</span\n      >\n    </div>\n  </ng-template>\n\n  <div class=\"profile-info\">\n    <p data-fnd=\"profile-info-names\" class=\"profile-info-names\">\n      {{ profile?.name }} {{ profile?.surname }}\n    </p>\n    <p data-fnd=\"profile-info-job-title\" class=\"profile-info-job-title\">\n      {{ profile?.jobTitle }}\n    </p>\n  </div>\n</div>\n", styles: [".profile{display:flex;align-items:center;margin-bottom:var(--granite-spacing-8);gap:var(--granite-spacing-4)}.profile-avatar{width:3rem;height:3rem;border-radius:50%;object-fit:cover}.profile-info{display:flex;flex-direction:column;gap:var(--granite-spacing-8)}.profile-info-names{color:var(--granite-color-text);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);margin:0}.profile-info-job-title{color:var(--granite-color-text-hint);font-size:var(--granite-font-size-body-small);margin:0}.no-profile-avatar{display:flex;width:3rem;height:3rem;border-radius:360px;background:var(--granite-color-background-info);justify-content:center;align-items:center}.no-profile-avatar-initials{font-size:var(--granite-font-size-micro);color:var(--granite-color-signal-info);font-weight:var(--granite-font-weight-regular)}\n"] }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"profileClass\" data-fnd=\"profile\" class=\"profile\">\n  <granite-avatar\n    data-fnd=\"profile-avatar\"\n    class=\"profile-avatar\"\n    [name]=\"profile.name\"\n    [surname]=\"profile.surname\"\n    [avatar]=\"profile.avatar\"\n  ></granite-avatar>\n\n  <ng-template #noProfileAvatar>\n    <div class=\"no-profile-avatar\">\n      <span\n        data-fnd=\"no-profile-avatar-initials\"\n        class=\"no-profile-avatar-initials\"\n        >{{ _initials }}</span\n      >\n    </div>\n  </ng-template>\n\n  <div class=\"profile-info\">\n    <p data-fnd=\"profile-info-names\" class=\"profile-info-names\">\n      {{ profile?.name }} {{ profile?.surname }}\n    </p>\n    <p data-fnd=\"profile-info-job-title\" class=\"profile-info-job-title\">\n      {{ profile?.jobTitle }}\n    </p>\n  </div>\n</div>\n", styles: [".profile{display:flex;align-items:center;margin-bottom:var(--granite-spacing-8);gap:var(--granite-spacing-4)}.profile-avatar{width:3rem;height:3rem;border-radius:50%}.profile-info{display:flex;flex-direction:column;gap:var(--granite-spacing-8)}.profile-info-names{color:var(--granite-color-text);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);margin:0}.profile-info-job-title{color:var(--granite-color-text-hint);font-size:var(--granite-font-size-body-small);margin:0}.no-profile-avatar{display:flex;width:3rem;height:3rem;border-radius:360px;background:var(--granite-color-background-info);justify-content:center;align-items:center}.no-profile-avatar-initials{font-size:var(--granite-font-size-micro);color:var(--granite-color-signal-info);font-weight:var(--granite-font-weight-regular)}\n"] }]
         }], propDecorators: { profile: [{
                 type: Input
             }], profileClass: [{
@@ -4345,6 +4478,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
                 args: ['graniteContactsTriggerFor']
             }] } });
 
+class GraniteAvatarModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.4", ngImport: i0, type: GraniteAvatarModule, declarations: [GraniteAvatarComponent,
+            GraniteAvatarDefaultStatusComponent,
+            GraniteCustomAvatarStatusDirective,
+            GraniteEmptyAvatarComponent], imports: [CommonModule], exports: [GraniteAvatarComponent,
+            GraniteAvatarDefaultStatusComponent,
+            GraniteCustomAvatarStatusDirective,
+            GraniteEmptyAvatarComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteAvatarModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteAvatarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    declarations: [
+                        GraniteAvatarComponent,
+                        GraniteAvatarDefaultStatusComponent,
+                        GraniteCustomAvatarStatusDirective,
+                        GraniteEmptyAvatarComponent,
+                    ],
+                    exports: [
+                        GraniteAvatarComponent,
+                        GraniteAvatarDefaultStatusComponent,
+                        GraniteCustomAvatarStatusDirective,
+                        GraniteEmptyAvatarComponent,
+                    ],
+                }]
+        }] });
+
 class GraniteContactsModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteContactsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.4", ngImport: i0, type: GraniteContactsModule, declarations: [GraniteContactsComponent,
@@ -4354,17 +4517,17 @@ class GraniteContactsModule {
             GraniteContactItemTitleComponent,
             GraniteContactsTriggerForDirective,
             GraniteCustomStatusDirective,
-            GraniteCustomProfileDirective], imports: [GraniteIconModule, CommonModule], exports: [GraniteContactsComponent,
+            GraniteCustomProfileDirective], imports: [GraniteIconModule, GraniteAvatarModule, CommonModule], exports: [GraniteContactsComponent,
             GraniteContactsTriggerForDirective,
             GraniteContactItemComponent,
             GraniteCustomStatusDirective,
             GraniteCustomProfileDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteContactsModule, imports: [GraniteIconModule, CommonModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteContactsModule, imports: [GraniteIconModule, GraniteAvatarModule, CommonModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteContactsModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [GraniteIconModule, CommonModule],
+                    imports: [GraniteIconModule, GraniteAvatarModule, CommonModule],
                     declarations: [
                         GraniteContactsComponent,
                         GraniteContactsProfileComponent,
@@ -5540,5 +5703,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ButtonSelectors, CONTACT_DEFAULT_STATUS, ClientInputDesktopDirective, ClientInputTouchDirective, ClientOutputDesktopDirective, ClientOutputTouchDirective, ContactItemDefaultStatusComponent, GRANITE_CLIENT_INPUT, GRANITE_CLIENT_OUTPUT, GraniteAnchorComponent, GraniteArrangeGridComponent, GraniteArrangeGridItemComponent, GraniteArrangeGridModule, GraniteArrangeGridOrientation, GraniteBadgeComponent, GraniteBadgeHarness, GraniteBadgeModule, GraniteButtonComponent, GraniteButtonModule, GraniteCardActionsComponent, GraniteCardAvatarComponent, GraniteCardBodyComponent, GraniteCardComponent, GraniteCardContentComponent, GraniteCardFooterComponent, GraniteCardHeaderComponent, GraniteCardHeaderSubTitleComponent, GraniteCardHeaderTitleComponent, GraniteCardListComponent, GraniteCardListModule, GraniteCheckboxComponent, GraniteCheckboxGroupComponent, GraniteCheckboxModule, GraniteChipComponent, GraniteChipInputDirective, GraniteChipListComponent, GraniteChipSelectionChangeEvent, GraniteChipsModule, GraniteCollapsibleConditionalBodyDirective, GraniteCollapsibleConditionalHeaderDirective, GraniteCollapsibleGroupComponent, GraniteCollapsibleGroupModule, GraniteContactItemComponent, GraniteContactItemTitleComponent, GraniteContactsComponent, GraniteContactsModule, GraniteContactsProfileComponent, GraniteContactsTriggerForDirective, GraniteCoreModule, GraniteCustomProfileDirective, GraniteCustomStatusDirective, GraniteDividerDirective, GraniteFileUploadComponent, GraniteFileUploadModule, GraniteGridComponent, GraniteGridItemComponent, GraniteGridModule, GraniteHideOnOverflowDirective, GraniteIconComponent, GraniteIconModule, GraniteInputFieldComponent, GraniteInputFieldModule, GraniteLabelComponent, GraniteLabelModule, GraniteMenuComponent, GraniteMenuHarness, GraniteMenuItemComponent, GraniteMenuItemHarness, GraniteMenuModule, GraniteMenuTouchCloseComponent, GraniteMenuTouchTitleItemComponent, GraniteMenuTriggerForDirective, GraniteProgressBarComponent, GraniteProgressBarModule, GraniteRadioButtonComponent, GraniteRadioButtonModule, GraniteRadioGroupComponent, GraniteTitleDirective, GraniteTitlePipe, GraniteToggleSwitchComponent, GraniteToggleSwitchModule, PurePipesModule, deviceDesktop, deviceTouch, disabledMixin, graniteMenuDesktopAnimations, graniteMenuTouchAnimations };
+export { AVATAR_DEFAULT_STATUS, ButtonSelectors, CONTACT_DEFAULT_STATUS, ClientInputDesktopDirective, ClientInputTouchDirective, ClientOutputDesktopDirective, ClientOutputTouchDirective, ContactItemDefaultStatusComponent, GRANITE_CLIENT_INPUT, GRANITE_CLIENT_OUTPUT, GraniteAnchorComponent, GraniteArrangeGridComponent, GraniteArrangeGridItemComponent, GraniteArrangeGridModule, GraniteArrangeGridOrientation, GraniteAvatarComponent, GraniteAvatarDefaultStatusComponent, GraniteAvatarModule, GraniteBadgeComponent, GraniteBadgeHarness, GraniteBadgeModule, GraniteButtonComponent, GraniteButtonModule, GraniteCardActionsComponent, GraniteCardAvatarComponent, GraniteCardBodyComponent, GraniteCardComponent, GraniteCardContentComponent, GraniteCardFooterComponent, GraniteCardHeaderComponent, GraniteCardHeaderSubTitleComponent, GraniteCardHeaderTitleComponent, GraniteCardListComponent, GraniteCardListModule, GraniteCheckboxComponent, GraniteCheckboxGroupComponent, GraniteCheckboxModule, GraniteChipComponent, GraniteChipInputDirective, GraniteChipListComponent, GraniteChipSelectionChangeEvent, GraniteChipsModule, GraniteCollapsibleConditionalBodyDirective, GraniteCollapsibleConditionalHeaderDirective, GraniteCollapsibleGroupComponent, GraniteCollapsibleGroupModule, GraniteContactItemComponent, GraniteContactItemTitleComponent, GraniteContactsComponent, GraniteContactsModule, GraniteContactsProfileComponent, GraniteContactsTriggerForDirective, GraniteCoreModule, GraniteCustomAvatarStatusDirective, GraniteCustomProfileDirective, GraniteCustomStatusDirective, GraniteDividerDirective, GraniteEmptyAvatarComponent, GraniteFileUploadComponent, GraniteFileUploadModule, GraniteGridComponent, GraniteGridItemComponent, GraniteGridModule, GraniteHideOnOverflowDirective, GraniteIconComponent, GraniteIconModule, GraniteInputFieldComponent, GraniteInputFieldModule, GraniteLabelComponent, GraniteLabelModule, GraniteMenuComponent, GraniteMenuHarness, GraniteMenuItemComponent, GraniteMenuItemHarness, GraniteMenuModule, GraniteMenuTouchCloseComponent, GraniteMenuTouchTitleItemComponent, GraniteMenuTriggerForDirective, GraniteProgressBarComponent, GraniteProgressBarModule, GraniteRadioButtonComponent, GraniteRadioButtonModule, GraniteRadioGroupComponent, GraniteTitleDirective, GraniteTitlePipe, GraniteToggleSwitchComponent, GraniteToggleSwitchModule, PurePipesModule, deviceDesktop, deviceTouch, disabledMixin, graniteMenuDesktopAnimations, graniteMenuTouchAnimations };
 //# sourceMappingURL=ifsworld-granite-components.mjs.map