npm - @ifsworld/granite-components - Versions diffs - 13.4.1 → 13.4.3 - Mend

@ifsworld/granite-components 13.4.1 → 13.4.3

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 (10) hide show

package/esm2022/lib/avatar/avatar.component.mjs CHANGED Viewed

@@ -10,14 +10,23 @@ export class GraniteAvatarComponent extends ContactsTriggerDataComponent {
     constructor(cd) {
         super();
         this.cd = cd;
+        this.ariaLabel = null;
+        this.avatarAriaLabel = '';
     }
     ngOnChanges(changes) {
-        if (changes.firstName || changes.lastName || changes.name) {
-            this._nameInitials = NamesUtilsService.buildNameData({
+        if (changes.firstName ||
+            changes.lastName ||
+            changes.name ||
+            changes.ariaLabel) {
+            const nameData = NamesUtilsService.buildNameData({
                 firstName: changes.firstName?.currentValue,
                 lastName: changes.lastName?.currentValue,
                 name: changes.name?.currentValue,
-            }).initials;
+            });
+            this._nameInitials = nameData?.initials;
+            this.avatarAriaLabel =
+                changes.ariaLabel?.currentValue ??
+                    `${nameData?.firstName ?? ''} ${nameData?.lastName ?? ''}`.trim();
             this.cd.markForCheck();
         }
     }
@@ -32,13 +41,13 @@ export class GraniteAvatarComponent extends ContactsTriggerDataComponent {
         }, {});
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteAvatarComponent, deps: [{ token: i0.ChangeDetectorRef }], 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", firstName: "firstName", lastName: "lastName", avatar: "avatar", status: "status" }, host: { classAttribute: "granite-avatar" }, queries: [{ propertyName: "_customStatusesQueryList", predicate: GraniteCustomAvatarStatusDirective }], exportAs: ["graniteAvatar"], usesInheritance: true, usesOnChanges: 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    [initials]=\"_nameInitials\"\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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.GraniteAvatarDefaultStatusComponent, selector: "granite-avatar-default-status", inputs: ["status"] }, { kind: "component", type: i3.GraniteEmptyAvatarComponent, selector: "granite-empty-avatar", inputs: ["initials"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: GraniteAvatarComponent, selector: "granite-avatar", inputs: { name: "name", firstName: "firstName", lastName: "lastName", avatar: "avatar", status: "status", ariaLabel: ["aria-label", "ariaLabel"] }, host: { classAttribute: "granite-avatar" }, queries: [{ propertyName: "_customStatusesQueryList", predicate: GraniteCustomAvatarStatusDirective }], exportAs: ["graniteAvatar"], usesInheritance: true, usesOnChanges: 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  [attr.aria-label]=\"avatarAriaLabel\"\n/>\n\n<ng-template #noProfileAvatar>\n  <granite-empty-avatar\n    class=\"profile-size\"\n    [initials]=\"_nameInitials\"\n    [aria-label]=\"avatarAriaLabel\"\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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.GraniteAvatarDefaultStatusComponent, selector: "granite-avatar-default-status", inputs: ["status"] }, { kind: "component", type: i3.GraniteEmptyAvatarComponent, selector: "granite-empty-avatar", inputs: ["initials", "aria-label"] }], 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    [initials]=\"_nameInitials\"\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"] }]
+                    }, 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  [attr.aria-label]=\"avatarAriaLabel\"\n/>\n\n<ng-template #noProfileAvatar>\n  <granite-empty-avatar\n    class=\"profile-size\"\n    [initials]=\"_nameInitials\"\n    [aria-label]=\"avatarAriaLabel\"\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"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { name: [{
                 type: Input
             }], firstName: [{
@@ -49,8 +58,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
                 type: Input
             }], status: [{
                 type: Input
+            }], ariaLabel: [{
+                type: Input,
+                args: ['aria-label']
             }], _customStatusesQueryList: [{
                 type: ContentChildren,
                 args: [GraniteCustomAvatarStatusDirective]
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXZhdGFyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvZ3Jhbml0ZS1jb21wb25lbnRzL3NyYy9saWIvYXZhdGFyL2F2YXRhci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9saWJzL2dyYW5pdGUtY29tcG9uZW50cy9zcmMvbGliL2F2YXRhci9hdmF0YXIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLHVCQUF1QixFQUN2QixTQUFTLEVBQ1QsS0FBSyxFQUNMLGVBQWUsRUFDZixTQUFTLEVBR1QsaUJBQWlCLEdBR2xCLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSw0QkFBNEIsRUFBRSxNQUFNLG9EQUFvRCxDQUFDO0FBQ2xHLE9BQU8sRUFBRSxrQ0FBa0MsRUFBRSxNQUFNLGtDQUFrQyxDQUFDO0FBRXRGLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLHNDQUFzQyxDQUFDOzs7OztBQVl6RSxNQUFNLE9BQU8sc0JBQ1gsU0FBUSw0QkFBNEI7SUFlcEMsWUFBb0IsRUFBcUI7UUFDdkMsS0FBSyxFQUFFLENBQUM7UUFEVSxPQUFFLEdBQUYsRUFBRSxDQUFtQjtJQUV6QyxDQUFDO0lBRUQsV0FBVyxDQUFDLE9BQXNCO1FBQ2hDLElBQUksT0FBTyxDQUFDLFNBQVMsSUFBSSxPQUFPLENBQUMsUUFBUSxJQUFJLE9BQU8sQ0FBQyxJQUFJLEVBQUUsQ0FBQztZQUMxRCxJQUFJLENBQUMsYUFBYSxHQUFHLGlCQUFpQixDQUFDLGFBQWEsQ0FBQztnQkFDbkQsU0FBUyxFQUFFLE9BQU8sQ0FBQyxTQUFTLEVBQUUsWUFBWTtnQkFDMUMsUUFBUSxFQUFFLE9BQU8sQ0FBQyxRQUFRLEVBQUUsWUFBWTtnQkFDeEMsSUFBSSxFQUFFLE9BQU8sQ0FBQyxJQUFJLEVBQUUsWUFBWTthQUNqQyxDQUFDLENBQUMsUUFBUSxDQUFDO1lBRVosSUFBSSxDQUFDLEVBQUUsQ0FBQyxZQUFZLEVBQUUsQ0FBQztRQUN6QixDQUFDO0lBQ0gsQ0FBQztJQUVELHFCQUFxQjtRQUNuQixJQUFJLENBQUMsdUJBQXVCLEdBQUcsSUFBSSxDQUFDLHdCQUF3QjthQUN6RCxPQUFPLEVBQUU7YUFDVCxNQUFNLENBQUMsQ0FBQyxVQUFVLEVBQUUsSUFBSSxFQUFFLEVBQUU7WUFDM0IsT0FBTztnQkFDTCxHQUFHLFVBQVU7Z0JBQ2IsQ0FBQyxJQUFJLENBQUMseUJBQXlCLENBQUMsRUFBRSxJQUFJLENBQUMsV0FBVzthQUNuRCxDQUFDO1FBQ0osQ0FBQyxFQUFFLEVBQUUsQ0FBQyxDQUFDO0lBQ1gsQ0FBQzs4R0F6Q1Usc0JBQXNCO2tHQUF0QixzQkFBc0IsdVBBVWhCLGtDQUFrQyxzR0NyQ3JELGlqQ0F3Q0E7OzJGRGJhLHNCQUFzQjtrQkFWbEMsU0FBUzsrQkFDRSxnQkFBZ0IsWUFDaEIsZUFBZSxRQUNuQjt3QkFDSixLQUFLLEVBQUUsZ0JBQWdCO3FCQUN4QixtQkFHZ0IsdUJBQXVCLENBQUMsTUFBTTtzRkFNdEMsSUFBSTtzQkFBWixLQUFLO2dCQUNHLFNBQVM7c0JBQWpCLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxNQUFNO3NCQUFkLEtBQUs7Z0JBQ0csTUFBTTtzQkFBZCxLQUFLO2dCQUdOLHdCQUF3QjtzQkFEdkIsZUFBZTt1QkFBQyxrQ0FBa0MiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ29tcG9uZW50LFxuICBJbnB1dCxcbiAgQ29udGVudENoaWxkcmVuLFxuICBRdWVyeUxpc3QsXG4gIEFmdGVyQ29udGVudENoZWNrZWQsXG4gIFRlbXBsYXRlUmVmLFxuICBDaGFuZ2VEZXRlY3RvclJlZixcbiAgT25DaGFuZ2VzLFxuICBTaW1wbGVDaGFuZ2VzLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENvbnRhY3RzVHJpZ2dlckRhdGFDb21wb25lbnQgfSBmcm9tICcuLi9jb250YWN0cy9jb250YWN0cy10cmlnZ2VyL2NvbnRhY3RzLXRyaWdnZXItZGF0YSc7XG5pbXBvcnQgeyBHcmFuaXRlQ3VzdG9tQXZhdGFyU3RhdHVzRGlyZWN0aXZlIH0gZnJvbSAnLi9jdXN0b20tYXZhdGFyLXN0YXR1cy5kaXJlY3RpdmUnO1xuaW1wb3J0IHsgQXZhdGFyRGVmYXVsdFN0YXR1c2VzIH0gZnJvbSAnLi9hdmF0YXIuY29tcG9uZW50LnB1YmxpYy10eXBlcyc7XG5pbXBvcnQgeyBOYW1lc1V0aWxzU2VydmljZSB9IGZyb20gJy4uL2NvcmUvc2VydmljZXMvbmFtZXMtdXRpbHMtc2VydmljZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2dyYW5pdGUtYXZhdGFyJyxcbiAgZXhwb3J0QXM6ICdncmFuaXRlQXZhdGFyJyxcbiAgaG9zdDoge1xuICAgIGNsYXNzOiAnZ3Jhbml0ZS1hdmF0YXInLFxuICB9LFxuICB0ZW1wbGF0ZVVybDogJy4vYXZhdGFyLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vYXZhdGFyLmNvbXBvbmVudC5zY3NzJ10sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBHcmFuaXRlQXZhdGFyQ29tcG9uZW50XG4gIGV4dGVuZHMgQ29udGFjdHNUcmlnZ2VyRGF0YUNvbXBvbmVudFxuICBpbXBsZW1lbnRzIEFmdGVyQ29udGVudENoZWNrZWQsIE9uQ2hhbmdlc1xue1xuICBASW5wdXQoKSBuYW1lOiBzdHJpbmc7XG4gIEBJbnB1dCgpIGZpcnN0TmFtZTogc3RyaW5nO1xuICBASW5wdXQoKSBsYXN0TmFtZTogc3RyaW5nO1xuICBASW5wdXQoKSBhdmF0YXI6IHN0cmluZztcbiAgQElucHV0KCkgc3RhdHVzOiBBdmF0YXJEZWZhdWx0U3RhdHVzZXM7XG5cbiAgQENvbnRlbnRDaGlsZHJlbihHcmFuaXRlQ3VzdG9tQXZhdGFyU3RhdHVzRGlyZWN0aXZlKVxuICBfY3VzdG9tU3RhdHVzZXNRdWVyeUxpc3Q6IFF1ZXJ5TGlzdDxHcmFuaXRlQ3VzdG9tQXZhdGFyU3RhdHVzRGlyZWN0aXZlPjtcbiAgX2N1c3RvbVN0YXR1c0RpcmVjdGl2ZXM6IFJlY29yZDxzdHJpbmcsIFRlbXBsYXRlUmVmPHVua25vd24+PjtcblxuICBfbmFtZUluaXRpYWxzOiBzdHJpbmc7XG5cbiAgY29uc3RydWN0b3IocHJpdmF0ZSBjZDogQ2hhbmdlRGV0ZWN0b3JSZWYpIHtcbiAgICBzdXBlcigpO1xuICB9XG5cbiAgbmdPbkNoYW5nZXMoY2hhbmdlczogU2ltcGxlQ2hhbmdlcyk6IHZvaWQge1xuICAgIGlmIChjaGFuZ2VzLmZpcnN0TmFtZSB8fCBjaGFuZ2VzLmxhc3ROYW1lIHx8IGNoYW5nZXMubmFtZSkge1xuICAgICAgdGhpcy5fbmFtZUluaXRpYWxzID0gTmFtZXNVdGlsc1NlcnZpY2UuYnVpbGROYW1lRGF0YSh7XG4gICAgICAgIGZpcnN0TmFtZTogY2hhbmdlcy5maXJzdE5hbWU/LmN1cnJlbnRWYWx1ZSxcbiAgICAgICAgbGFzdE5hbWU6IGNoYW5nZXMubGFzdE5hbWU/LmN1cnJlbnRWYWx1ZSxcbiAgICAgICAgbmFtZTogY2hhbmdlcy5uYW1lPy5jdXJyZW50VmFsdWUsXG4gICAgICB9KS5pbml0aWFscztcblxuICAgICAgdGhpcy5jZC5tYXJrRm9yQ2hlY2soKTtcbiAgICB9XG4gIH1cblxuICBuZ0FmdGVyQ29udGVudENoZWNrZWQoKTogdm9pZCB7XG4gICAgdGhpcy5fY3VzdG9tU3RhdHVzRGlyZWN0aXZlcyA9IHRoaXMuX2N1c3RvbVN0YXR1c2VzUXVlcnlMaXN0XG4gICAgICAudG9BcnJheSgpXG4gICAgICAucmVkdWNlKChkaXJlY3RpdmVzLCBuZXh0KSA9PiB7XG4gICAgICAgIHJldHVybiB7XG4gICAgICAgICAgLi4uZGlyZWN0aXZlcyxcbiAgICAgICAgICBbbmV4dC5ncmFuaXRlQ3VzdG9tQXZhdGFyU3RhdHVzXTogbmV4dC50ZW1wbGF0ZVJlZixcbiAgICAgICAgfTtcbiAgICAgIH0sIHt9KTtcbiAgfVxufVxuIiwiPGltZ1xuICBkYXRhLWZuZD1cInByb2ZpbGUtYXZhdGFyXCJcbiAgKm5nSWY9XCJhdmF0YXI7IGVsc2Ugbm9Qcm9maWxlQXZhdGFyXCJcbiAgW3NyY109XCJhdmF0YXJcIlxuICBhbHQ9XCJhdmF0YXJcIlxuICBjbGFzcz1cInByb2ZpbGUtYXZhdGFyIHByb2ZpbGUtc2l6ZVwiXG4vPlxuXG48bmctdGVtcGxhdGUgI25vUHJvZmlsZUF2YXRhcj5cbiAgPGdyYW5pdGUtZW1wdHktYXZhdGFyXG4gICAgY2xhc3M9XCJwcm9maWxlLXNpemVcIlxuICAgIFtpbml0aWFsc109XCJfbmFtZUluaXRpYWxzXCJcbiAgPjwvZ3Jhbml0ZS1lbXB0eS1hdmF0YXI+XG48L25nLXRlbXBsYXRlPlxuXG5AaWYgKHN0YXR1cyAmJiBfY3VzdG9tU3RhdHVzRGlyZWN0aXZlc1tzdGF0dXNdKSB7XG4gIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJjdXN0b21TdGF0dXNcIj48L25nLWNvbnRhaW5lcj5cbn0gQGVsc2UgaWYgKHN0YXR1cykge1xuICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwiZGVmYXVsdFN0YXR1c1wiPjwvbmctY29udGFpbmVyPlxufVxuXG48bmctdGVtcGxhdGUgI2RlZmF1bHRTdGF0dXM+XG4gIDxncmFuaXRlLWF2YXRhci1kZWZhdWx0LXN0YXR1c1xuICAgIGNsYXNzPVwicHJvZmlsZS1kZWZhdWx0LXN0YXR1c1wiXG4gICAgW2F0dHIuZGF0YS1mbmRdPVwic3RhdHVzICsgJy1zdGF0dXMnXCJcbiAgICBbc3RhdHVzXT1cInN0YXR1c1wiXG4gID48L2dyYW5pdGUtYXZhdGFyLWRlZmF1bHQtc3RhdHVzPlxuPC9uZy10ZW1wbGF0ZT5cblxuPG5nLXRlbXBsYXRlICNjdXN0b21TdGF0dXM+XG4gIDxkaXZcbiAgICBbYXR0ci5kYXRhLWZuZF09XCIncHJvZmlsZS1zdGF0dXMtY3VzdG9tJ1wiXG4gICAgW2NsYXNzXT1cIidwcm9maWxlLXN0YXR1cy0nICsgc3RhdHVzXCJcbiAgICBjbGFzcz1cInByb2ZpbGUtY3VzdG9tLXN0YXR1c1wiXG4gID5cbiAgICA8bmctY29udGFpbmVyXG4gICAgICAqbmdUZW1wbGF0ZU91dGxldD1cIl9jdXN0b21TdGF0dXNEaXJlY3RpdmVzW3N0YXR1c11cIlxuICAgID48L25nLWNvbnRhaW5lcj5cbiAgPC9kaXY+XG48L25nLXRlbXBsYXRlPlxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXZhdGFyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvZ3Jhbml0ZS1jb21wb25lbnRzL3NyYy9saWIvYXZhdGFyL2F2YXRhci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9saWJzL2dyYW5pdGUtY29tcG9uZW50cy9zcmMvbGliL2F2YXRhci9hdmF0YXIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLHVCQUF1QixFQUN2QixTQUFTLEVBQ1QsS0FBSyxFQUNMLGVBQWUsRUFDZixTQUFTLEVBR1QsaUJBQWlCLEdBR2xCLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSw0QkFBNEIsRUFBRSxNQUFNLG9EQUFvRCxDQUFDO0FBQ2xHLE9BQU8sRUFBRSxrQ0FBa0MsRUFBRSxNQUFNLGtDQUFrQyxDQUFDO0FBRXRGLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLHNDQUFzQyxDQUFDOzs7OztBQVl6RSxNQUFNLE9BQU8sc0JBQ1gsU0FBUSw0QkFBNEI7SUFtQnBDLFlBQW9CLEVBQXFCO1FBQ3ZDLEtBQUssRUFBRSxDQUFDO1FBRFUsT0FBRSxHQUFGLEVBQUUsQ0FBbUI7UUFWekMsY0FBUyxHQUFrQixJQUFJLENBQUM7UUFRaEMsb0JBQWUsR0FBVyxFQUFFLENBQUM7SUFJN0IsQ0FBQztJQUVELFdBQVcsQ0FBQyxPQUFzQjtRQUNoQyxJQUNFLE9BQU8sQ0FBQyxTQUFTO1lBQ2pCLE9BQU8sQ0FBQyxRQUFRO1lBQ2hCLE9BQU8sQ0FBQyxJQUFJO1lBQ1osT0FBTyxDQUFDLFNBQVMsRUFDakIsQ0FBQztZQUNELE1BQU0sUUFBUSxHQUFHLGlCQUFpQixDQUFDLGFBQWEsQ0FBQztnQkFDL0MsU0FBUyxFQUFFLE9BQU8sQ0FBQyxTQUFTLEVBQUUsWUFBWTtnQkFDMUMsUUFBUSxFQUFFLE9BQU8sQ0FBQyxRQUFRLEVBQUUsWUFBWTtnQkFDeEMsSUFBSSxFQUFFLE9BQU8sQ0FBQyxJQUFJLEVBQUUsWUFBWTthQUNqQyxDQUFDLENBQUM7WUFFSCxJQUFJLENBQUMsYUFBYSxHQUFHLFFBQVEsRUFBRSxRQUFRLENBQUM7WUFFeEMsSUFBSSxDQUFDLGVBQWU7Z0JBQ2xCLE9BQU8sQ0FBQyxTQUFTLEVBQUUsWUFBWTtvQkFDL0IsR0FBRyxRQUFRLEVBQUUsU0FBUyxJQUFJLEVBQUUsSUFBSSxRQUFRLEVBQUUsUUFBUSxJQUFJLEVBQUUsRUFBRSxDQUFDLElBQUksRUFBRSxDQUFDO1lBRXBFLElBQUksQ0FBQyxFQUFFLENBQUMsWUFBWSxFQUFFLENBQUM7UUFDekIsQ0FBQztJQUNILENBQUM7SUFFRCxxQkFBcUI7UUFDbkIsSUFBSSxDQUFDLHVCQUF1QixHQUFHLElBQUksQ0FBQyx3QkFBd0I7YUFDekQsT0FBTyxFQUFFO2FBQ1QsTUFBTSxDQUFDLENBQUMsVUFBVSxFQUFFLElBQUksRUFBRSxFQUFFO1lBQzNCLE9BQU87Z0JBQ0wsR0FBRyxVQUFVO2dCQUNiLENBQUMsSUFBSSxDQUFDLHlCQUF5QixDQUFDLEVBQUUsSUFBSSxDQUFDLFdBQVc7YUFDbkQsQ0FBQztRQUNKLENBQUMsRUFBRSxFQUFFLENBQUMsQ0FBQztJQUNYLENBQUM7OEdBeERVLHNCQUFzQjtrR0FBdEIsc0JBQXNCLCtSQVloQixrQ0FBa0Msc0dDdkNyRCxnb0NBMENBOzsyRkRmYSxzQkFBc0I7a0JBVmxDLFNBQVM7K0JBQ0UsZ0JBQWdCLFlBQ2hCLGVBQWUsUUFDbkI7d0JBQ0osS0FBSyxFQUFFLGdCQUFnQjtxQkFDeEIsbUJBR2dCLHVCQUF1QixDQUFDLE1BQU07c0ZBTXRDLElBQUk7c0JBQVosS0FBSztnQkFDRyxTQUFTO3NCQUFqQixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csTUFBTTtzQkFBZCxLQUFLO2dCQUNHLE1BQU07c0JBQWQsS0FBSztnQkFFTixTQUFTO3NCQURSLEtBQUs7dUJBQUMsWUFBWTtnQkFJbkIsd0JBQXdCO3NCQUR2QixlQUFlO3VCQUFDLGtDQUFrQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICBDb21wb25lbnQsXG4gIElucHV0LFxuICBDb250ZW50Q2hpbGRyZW4sXG4gIFF1ZXJ5TGlzdCxcbiAgQWZ0ZXJDb250ZW50Q2hlY2tlZCxcbiAgVGVtcGxhdGVSZWYsXG4gIENoYW5nZURldGVjdG9yUmVmLFxuICBPbkNoYW5nZXMsXG4gIFNpbXBsZUNoYW5nZXMsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQ29udGFjdHNUcmlnZ2VyRGF0YUNvbXBvbmVudCB9IGZyb20gJy4uL2NvbnRhY3RzL2NvbnRhY3RzLXRyaWdnZXIvY29udGFjdHMtdHJpZ2dlci1kYXRhJztcbmltcG9ydCB7IEdyYW5pdGVDdXN0b21BdmF0YXJTdGF0dXNEaXJlY3RpdmUgfSBmcm9tICcuL2N1c3RvbS1hdmF0YXItc3RhdHVzLmRpcmVjdGl2ZSc7XG5pbXBvcnQgeyBBdmF0YXJEZWZhdWx0U3RhdHVzZXMgfSBmcm9tICcuL2F2YXRhci5jb21wb25lbnQucHVibGljLXR5cGVzJztcbmltcG9ydCB7IE5hbWVzVXRpbHNTZXJ2aWNlIH0gZnJvbSAnLi4vY29yZS9zZXJ2aWNlcy9uYW1lcy11dGlscy1zZXJ2aWNlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnZ3Jhbml0ZS1hdmF0YXInLFxuICBleHBvcnRBczogJ2dyYW5pdGVBdmF0YXInLFxuICBob3N0OiB7XG4gICAgY2xhc3M6ICdncmFuaXRlLWF2YXRhcicsXG4gIH0sXG4gIHRlbXBsYXRlVXJsOiAnLi9hdmF0YXIuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9hdmF0YXIuY29tcG9uZW50LnNjc3MnXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIEdyYW5pdGVBdmF0YXJDb21wb25lbnRcbiAgZXh0ZW5kcyBDb250YWN0c1RyaWdnZXJEYXRhQ29tcG9uZW50XG4gIGltcGxlbWVudHMgQWZ0ZXJDb250ZW50Q2hlY2tlZCwgT25DaGFuZ2VzXG57XG4gIEBJbnB1dCgpIG5hbWU6IHN0cmluZztcbiAgQElucHV0KCkgZmlyc3ROYW1lOiBzdHJpbmc7XG4gIEBJbnB1dCgpIGxhc3ROYW1lOiBzdHJpbmc7XG4gIEBJbnB1dCgpIGF2YXRhcjogc3RyaW5nO1xuICBASW5wdXQoKSBzdGF0dXM6IEF2YXRhckRlZmF1bHRTdGF0dXNlcztcbiAgQElucHV0KCdhcmlhLWxhYmVsJylcbiAgYXJpYUxhYmVsOiBzdHJpbmcgfCBudWxsID0gbnVsbDtcblxuICBAQ29udGVudENoaWxkcmVuKEdyYW5pdGVDdXN0b21BdmF0YXJTdGF0dXNEaXJlY3RpdmUpXG4gIF9jdXN0b21TdGF0dXNlc1F1ZXJ5TGlzdDogUXVlcnlMaXN0PEdyYW5pdGVDdXN0b21BdmF0YXJTdGF0dXNEaXJlY3RpdmU+O1xuICBfY3VzdG9tU3RhdHVzRGlyZWN0aXZlczogUmVjb3JkPHN0cmluZywgVGVtcGxhdGVSZWY8dW5rbm93bj4+O1xuXG4gIF9uYW1lSW5pdGlhbHM6IHN0cmluZztcblxuICBhdmF0YXJBcmlhTGFiZWw6IHN0cmluZyA9ICcnO1xuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgY2Q6IENoYW5nZURldGVjdG9yUmVmKSB7XG4gICAgc3VwZXIoKTtcbiAgfVxuXG4gIG5nT25DaGFuZ2VzKGNoYW5nZXM6IFNpbXBsZUNoYW5nZXMpOiB2b2lkIHtcbiAgICBpZiAoXG4gICAgICBjaGFuZ2VzLmZpcnN0TmFtZSB8fFxuICAgICAgY2hhbmdlcy5sYXN0TmFtZSB8fFxuICAgICAgY2hhbmdlcy5uYW1lIHx8XG4gICAgICBjaGFuZ2VzLmFyaWFMYWJlbFxuICAgICkge1xuICAgICAgY29uc3QgbmFtZURhdGEgPSBOYW1lc1V0aWxzU2VydmljZS5idWlsZE5hbWVEYXRhKHtcbiAgICAgICAgZmlyc3ROYW1lOiBjaGFuZ2VzLmZpcnN0TmFtZT8uY3VycmVudFZhbHVlLFxuICAgICAgICBsYXN0TmFtZTogY2hhbmdlcy5sYXN0TmFtZT8uY3VycmVudFZhbHVlLFxuICAgICAgICBuYW1lOiBjaGFuZ2VzLm5hbWU/LmN1cnJlbnRWYWx1ZSxcbiAgICAgIH0pO1xuXG4gICAgICB0aGlzLl9uYW1lSW5pdGlhbHMgPSBuYW1lRGF0YT8uaW5pdGlhbHM7XG5cbiAgICAgIHRoaXMuYXZhdGFyQXJpYUxhYmVsID1cbiAgICAgICAgY2hhbmdlcy5hcmlhTGFiZWw/LmN1cnJlbnRWYWx1ZSA/P1xuICAgICAgICBgJHtuYW1lRGF0YT8uZmlyc3ROYW1lID8/ICcnfSAke25hbWVEYXRhPy5sYXN0TmFtZSA/PyAnJ31gLnRyaW0oKTtcblxuICAgICAgdGhpcy5jZC5tYXJrRm9yQ2hlY2soKTtcbiAgICB9XG4gIH1cblxuICBuZ0FmdGVyQ29udGVudENoZWNrZWQoKTogdm9pZCB7XG4gICAgdGhpcy5fY3VzdG9tU3RhdHVzRGlyZWN0aXZlcyA9IHRoaXMuX2N1c3RvbVN0YXR1c2VzUXVlcnlMaXN0XG4gICAgICAudG9BcnJheSgpXG4gICAgICAucmVkdWNlKChkaXJlY3RpdmVzLCBuZXh0KSA9PiB7XG4gICAgICAgIHJldHVybiB7XG4gICAgICAgICAgLi4uZGlyZWN0aXZlcyxcbiAgICAgICAgICBbbmV4dC5ncmFuaXRlQ3VzdG9tQXZhdGFyU3RhdHVzXTogbmV4dC50ZW1wbGF0ZVJlZixcbiAgICAgICAgfTtcbiAgICAgIH0sIHt9KTtcbiAgfVxufVxuIiwiPGltZ1xuICBkYXRhLWZuZD1cInByb2ZpbGUtYXZhdGFyXCJcbiAgKm5nSWY9XCJhdmF0YXI7IGVsc2Ugbm9Qcm9maWxlQXZhdGFyXCJcbiAgW3NyY109XCJhdmF0YXJcIlxuICBhbHQ9XCJhdmF0YXJcIlxuICBjbGFzcz1cInByb2ZpbGUtYXZhdGFyIHByb2ZpbGUtc2l6ZVwiXG4gIFthdHRyLmFyaWEtbGFiZWxdPVwiYXZhdGFyQXJpYUxhYmVsXCJcbi8+XG5cbjxuZy10ZW1wbGF0ZSAjbm9Qcm9maWxlQXZhdGFyPlxuICA8Z3Jhbml0ZS1lbXB0eS1hdmF0YXJcbiAgICBjbGFzcz1cInByb2ZpbGUtc2l6ZVwiXG4gICAgW2luaXRpYWxzXT1cIl9uYW1lSW5pdGlhbHNcIlxuICAgIFthcmlhLWxhYmVsXT1cImF2YXRhckFyaWFMYWJlbFwiXG4gID48L2dyYW5pdGUtZW1wdHktYXZhdGFyPlxuPC9uZy10ZW1wbGF0ZT5cblxuQGlmIChzdGF0dXMgJiYgX2N1c3RvbVN0YXR1c0RpcmVjdGl2ZXNbc3RhdHVzXSkge1xuICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwiY3VzdG9tU3RhdHVzXCI+PC9uZy1jb250YWluZXI+XG59IEBlbHNlIGlmIChzdGF0dXMpIHtcbiAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cImRlZmF1bHRTdGF0dXNcIj48L25nLWNvbnRhaW5lcj5cbn1cblxuPG5nLXRlbXBsYXRlICNkZWZhdWx0U3RhdHVzPlxuICA8Z3Jhbml0ZS1hdmF0YXItZGVmYXVsdC1zdGF0dXNcbiAgICBjbGFzcz1cInByb2ZpbGUtZGVmYXVsdC1zdGF0dXNcIlxuICAgIFthdHRyLmRhdGEtZm5kXT1cInN0YXR1cyArICctc3RhdHVzJ1wiXG4gICAgW3N0YXR1c109XCJzdGF0dXNcIlxuICA+PC9ncmFuaXRlLWF2YXRhci1kZWZhdWx0LXN0YXR1cz5cbjwvbmctdGVtcGxhdGU+XG5cbjxuZy10ZW1wbGF0ZSAjY3VzdG9tU3RhdHVzPlxuICA8ZGl2XG4gICAgW2F0dHIuZGF0YS1mbmRdPVwiJ3Byb2ZpbGUtc3RhdHVzLWN1c3RvbSdcIlxuICAgIFtjbGFzc109XCIncHJvZmlsZS1zdGF0dXMtJyArIHN0YXR1c1wiXG4gICAgY2xhc3M9XCJwcm9maWxlLWN1c3RvbS1zdGF0dXNcIlxuICA+XG4gICAgPG5nLWNvbnRhaW5lclxuICAgICAgKm5nVGVtcGxhdGVPdXRsZXQ9XCJfY3VzdG9tU3RhdHVzRGlyZWN0aXZlc1tzdGF0dXNdXCJcbiAgICA+PC9uZy1jb250YWluZXI+XG4gIDwvZGl2PlxuPC9uZy10ZW1wbGF0ZT5cbiJdfQ==

package/esm2022/lib/avatar/empty-avatar/empty-avatar.component.mjs CHANGED Viewed

@@ -1,9 +1,12 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import * as i0 from "@angular/core";
 export class GraniteEmptyAvatarComponent {
+    constructor() {
+        this.ariaLabel = null;
+    }
     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: { initials: "initials" }, host: { classAttribute: "granite-empty-avatar" }, ngImport: i0, template: `
-    <div class="no-profile-avatar">
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: GraniteEmptyAvatarComponent, selector: "granite-empty-avatar", inputs: { initials: "initials", ariaLabel: ["aria-label", "ariaLabel"] }, host: { classAttribute: "granite-empty-avatar" }, ngImport: i0, template: `
+    <div class="no-profile-avatar" [attr.aria-label]="ariaLabel" role="img">
       <span
         data-fnd="no-profile-avatar-initials"
         class="no-profile-avatar-initials"
@@ -17,7 +20,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
             args: [{ selector: 'granite-empty-avatar', host: {
                         class: 'granite-empty-avatar',
                     }, template: `
-    <div class="no-profile-avatar">
+    <div class="no-profile-avatar" [attr.aria-label]="ariaLabel" role="img">
       <span
         data-fnd="no-profile-avatar-initials"
         class="no-profile-avatar-initials"
@@ -27,5 +30,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
   `, 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: { initials: [{
                 type: Input
+            }], ariaLabel: [{
+                type: Input,
+                args: ['aria-label']
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZW1wdHktYXZhdGFyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvZ3Jhbml0ZS1jb21wb25lbnRzL3NyYy9saWIvYXZhdGFyL2VtcHR5LWF2YXRhci9lbXB0eS1hdmF0YXIuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDOztBQW1CMUUsTUFBTSxPQUFPLDJCQUEyQjs4R0FBM0IsMkJBQTJCO2tHQUEzQiwyQkFBMkIsZ0pBWjVCOzs7Ozs7OztHQVFUOzsyRkFJVSwyQkFBMkI7a0JBakJ2QyxTQUFTOytCQUNFLHNCQUFzQixRQUMxQjt3QkFDSixLQUFLLEVBQUUsc0JBQXNCO3FCQUM5QixZQUNTOzs7Ozs7OztHQVFULG1CQUVnQix1QkFBdUIsQ0FBQyxNQUFNOzhCQUd0QyxRQUFRO3NCQUFoQixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnZ3Jhbml0ZS1lbXB0eS1hdmF0YXInLFxuICBob3N0OiB7XG4gICAgY2xhc3M6ICdncmFuaXRlLWVtcHR5LWF2YXRhcicsXG4gIH0sXG4gIHRlbXBsYXRlOiBgXG4gICAgPGRpdiBjbGFzcz1cIm5vLXByb2ZpbGUtYXZhdGFyXCI+XG4gICAgICA8c3BhblxuICAgICAgICBkYXRhLWZuZD1cIm5vLXByb2ZpbGUtYXZhdGFyLWluaXRpYWxzXCJcbiAgICAgICAgY2xhc3M9XCJuby1wcm9maWxlLWF2YXRhci1pbml0aWFsc1wiXG4gICAgICAgID57eyBpbml0aWFscyB9fTwvc3BhblxuICAgICAgPlxuICAgIDwvZGl2PlxuICBgLFxuICBzdHlsZVVybHM6IFsnLi9lbXB0eS1hdmF0YXIuY29tcG9uZW50LnNjc3MnXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIEdyYW5pdGVFbXB0eUF2YXRhckNvbXBvbmVudCB7XG4gIEBJbnB1dCgpIGluaXRpYWxzOiBzdHJpbmc7XG59XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZW1wdHktYXZhdGFyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvZ3Jhbml0ZS1jb21wb25lbnRzL3NyYy9saWIvYXZhdGFyL2VtcHR5LWF2YXRhci9lbXB0eS1hdmF0YXIuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDOztBQW1CMUUsTUFBTSxPQUFPLDJCQUEyQjtJQWpCeEM7UUFxQkUsY0FBUyxHQUFrQixJQUFJLENBQUM7S0FDakM7OEdBTFksMkJBQTJCO2tHQUEzQiwyQkFBMkIsd0xBWjVCOzs7Ozs7OztHQVFUOzsyRkFJVSwyQkFBMkI7a0JBakJ2QyxTQUFTOytCQUNFLHNCQUFzQixRQUMxQjt3QkFDSixLQUFLLEVBQUUsc0JBQXNCO3FCQUM5QixZQUNTOzs7Ozs7OztHQVFULG1CQUVnQix1QkFBdUIsQ0FBQyxNQUFNOzhCQUd0QyxRQUFRO3NCQUFoQixLQUFLO2dCQUdOLFNBQVM7c0JBRFIsS0FBSzt1QkFBQyxZQUFZIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnZ3Jhbml0ZS1lbXB0eS1hdmF0YXInLFxuICBob3N0OiB7XG4gICAgY2xhc3M6ICdncmFuaXRlLWVtcHR5LWF2YXRhcicsXG4gIH0sXG4gIHRlbXBsYXRlOiBgXG4gICAgPGRpdiBjbGFzcz1cIm5vLXByb2ZpbGUtYXZhdGFyXCIgW2F0dHIuYXJpYS1sYWJlbF09XCJhcmlhTGFiZWxcIiByb2xlPVwiaW1nXCI+XG4gICAgICA8c3BhblxuICAgICAgICBkYXRhLWZuZD1cIm5vLXByb2ZpbGUtYXZhdGFyLWluaXRpYWxzXCJcbiAgICAgICAgY2xhc3M9XCJuby1wcm9maWxlLWF2YXRhci1pbml0aWFsc1wiXG4gICAgICAgID57eyBpbml0aWFscyB9fTwvc3BhblxuICAgICAgPlxuICAgIDwvZGl2PlxuICBgLFxuICBzdHlsZVVybHM6IFsnLi9lbXB0eS1hdmF0YXIuY29tcG9uZW50LnNjc3MnXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIEdyYW5pdGVFbXB0eUF2YXRhckNvbXBvbmVudCB7XG4gIEBJbnB1dCgpIGluaXRpYWxzOiBzdHJpbmc7XG5cbiAgQElucHV0KCdhcmlhLWxhYmVsJylcbiAgYXJpYUxhYmVsOiBzdHJpbmcgfCBudWxsID0gbnVsbDtcbn1cbiJdfQ==

package/esm2022/lib/badge/badge.component.mjs CHANGED Viewed

@@ -21,14 +21,14 @@ export class GraniteBadgeComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteBadgeComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: GraniteBadgeComponent, selector: "granite-badge", inputs: { backgroundColor: "backgroundColor", color: "color", pill: "pill" }, host: { properties: { "class.granite-badge-pill": "pill" }, classAttribute: "granite-badge" }, exportAs: ["graniteBadge"], usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:-moz-inline-flex;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;align-items:center;background-color:var(--granite-color-signal-neutral);color:var(--granite-color-text-static-light);border-radius:var(--granite-radius-s);font-size:var(--granite-font-size-body-small);padding-inline:var(--granite-spacing-8);padding-block:var(--granite-spacing-4)}:host(.granite-badge-pill){border-radius:var(--granite-radius-l)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: GraniteBadgeComponent, selector: "granite-badge", inputs: { backgroundColor: "backgroundColor", color: "color", pill: "pill" }, host: { properties: { "class.granite-badge-pill": "pill" }, classAttribute: "granite-badge" }, exportAs: ["graniteBadge"], usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{overflow:hidden;-ms-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;display:block;align-items:center;background-color:var(--granite-color-signal-neutral);color:var(--granite-color-text-static-light);border-radius:var(--granite-radius-s);font-size:var(--granite-font-size-body-small);padding-inline:var(--granite-spacing-8);padding-block:var(--granite-spacing-4);max-width:-moz-fit-content;max-width:fit-content}:host(.granite-badge-pill){border-radius:var(--granite-radius-l)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteBadgeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'granite-badge', exportAs: 'graniteBadge', host: {
                         class: 'granite-badge',
                         '[class.granite-badge-pill]': 'pill',
-                    }, template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:-moz-inline-flex;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;align-items:center;background-color:var(--granite-color-signal-neutral);color:var(--granite-color-text-static-light);border-radius:var(--granite-radius-s);font-size:var(--granite-font-size-body-small);padding-inline:var(--granite-spacing-8);padding-block:var(--granite-spacing-4)}:host(.granite-badge-pill){border-radius:var(--granite-radius-l)}\n"] }]
+                    }, template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{overflow:hidden;-ms-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;display:block;align-items:center;background-color:var(--granite-color-signal-neutral);color:var(--granite-color-text-static-light);border-radius:var(--granite-radius-s);font-size:var(--granite-font-size-body-small);padding-inline:var(--granite-spacing-8);padding-block:var(--granite-spacing-4);max-width:-moz-fit-content;max-width:fit-content}:host(.granite-badge-pill){border-radius:var(--granite-radius-l)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { backgroundColor: [{
                 type: Input
             }], color: [{

package/esm2022/lib/contacts/contacts-profile/contacts-profile.component.mjs CHANGED Viewed

@@ -3,7 +3,7 @@ import * as i0 from "@angular/core";
 import * as i1 from "../../avatar/avatar.component";
 export class GraniteContactsProfileComponent {
     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" }, ngImport: i0, template: "<div [class]=\"profileClass\" data-fnd=\"profile\" class=\"profile\">\n  <granite-avatar\n    data-fnd=\"profile-avatar\"\n    class=\"profile-avatar\"\n    [firstName]=\"profile.firstName\"\n    [lastName]=\"profile.lastName\"\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        >{{ profile?.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?.firstName }} {{ profile?.lastName }}\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: i1.GraniteAvatarComponent, selector: "granite-avatar", inputs: ["name", "firstName", "lastName", "avatar", "status"], exportAs: ["graniteAvatar"] }], 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" }, ngImport: i0, template: "<div [class]=\"profileClass\" data-fnd=\"profile\" class=\"profile\">\n  <granite-avatar\n    data-fnd=\"profile-avatar\"\n    class=\"profile-avatar\"\n    [firstName]=\"profile.firstName\"\n    [lastName]=\"profile.lastName\"\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        >{{ profile?.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?.firstName }} {{ profile?.lastName }}\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: i1.GraniteAvatarComponent, selector: "granite-avatar", inputs: ["name", "firstName", "lastName", "avatar", "status", "aria-label"], exportAs: ["graniteAvatar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteContactsProfileComponent, decorators: [{
             type: Component,

package/esm2022/lib/toggle-switch/toggle-switch.component.mjs CHANGED Viewed

@@ -60,7 +60,7 @@ export class GraniteToggleSwitchComponent {
         return this._inputElement.nativeElement;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteToggleSwitchComponent, deps: [{ token: i1.FocusMonitor }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: GraniteToggleSwitchComponent, selector: "granite-toggle-switch", inputs: { id: "id", checked: "checked", disabled: "disabled", readonly: "readonly", labelPosition: "labelPosition", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"] }, outputs: { valueChange: "valueChange", toggleChange: "toggleChange", toggleBlur: "toggleBlur" }, host: { properties: { "class.granite-toggle-switch-checked": "checked", "class.granite-toggle-switch-disabled": "disabled", "class.granite-toggle-switch-readonly": "readonly", "class.granite-toggle-switch-label-before": "_positionBefore" }, classAttribute: "granite-toggle-switch" }, viewQueries: [{ propertyName: "_inputElement", first: true, predicate: ["input"], descendants: true }], exportAs: ["graniteToggleSwitch"], usesOnChanges: true, ngImport: i0, template: "<label [attr.for]=\"id\" class=\"granite-toggle-switch-label\">\n  <div class=\"granite-toggle-switch-bar\">\n    <input\n      #input\n      [id]=\"id\"\n      class=\"granite-toggle-switch-input cdk-visually-hidden\"\n      role=\"switch\"\n      type=\"checkbox\"\n      [attr.aria-checked]=\"checked.toString()\"\n      [attr.aria-label]=\"ariaLabel\"\n      [attr.aria-labelledby]=\"ariaLabelledby\"\n      [checked]=\"checked\"\n      [disabled]=\"_toggleSwitchDisabled\"\n      [readonly]=\"readonly\"\n      (click)=\"_toggleSwitchClick()\"\n      (change)=\"_toggleSwitchChange()\"\n      (blur)=\"_onBlur()\"\n    />\n    <div class=\"granite-toggle-switch-thumb\"></div>\n  </div>\n  <span class=\"granite-toggle-switch-text\"><ng-content></ng-content></span>\n</label>\n", styles: [".cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] .cdk-visually-hidden{left:auto;right:0}:host{box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit;cursor:pointer}:host(.granite-toggle-switch){color:var(--granite-color-text)}.granite-toggle-switch-bar{width:2rem;height:1rem;border-radius:.5rem;background-color:var(--granite-color-background-inactive);transition:background-color .1s linear;position:relative}.granite-toggle-switch-bar:focus-within{box-shadow:0 0 0 .0625rem var(--granite-color-focus)}.granite-toggle-switch-thumb{width:1rem;height:1rem;border-radius:1rem;background-color:var(--granite-color-text-static-light);border:.0625rem solid var(--granite-color-background-inactive);transition:float .1s linear}html[dir=ltr] .granite-toggle-switch-thumb{float:left}:host-context([dir=ltr]) .granite-toggle-switch-thumb{float:left}html[dir=rtl] .granite-toggle-switch-thumb{float:right}:host-context([dir=rtl]) .granite-toggle-switch-thumb{float:right}:host(.granite-toggle-switch-checked) .granite-toggle-switch-bar{background-color:var(--granite-color-background-active)}:host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{border:.0625rem solid var(--granite-color-background-active)}html[dir=ltr] :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:right}:host-context([dir=ltr]) :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:right}html[dir=rtl] :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:left}:host-context([dir=rtl]) :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:left}.granite-toggle-switch-label{display:flex;align-items:center;width:max-content}:host(.granite-toggle-switch-disabled) .granite-toggle-switch-label{opacity:.6}:host(.granite-toggle-switch-disabled) *{cursor:default}:host(.granite-toggle-switch-readonly) *{cursor:default}.granite-toggle-switch-text{padding-inline-start:var(--granite-spacing-8);font-size:var(--granite-font-size-body-small)}.granite-toggle-switch-text:empty{display:none}:host(.granite-toggle-switch-label-before) .granite-toggle-switch-label{flex-direction:row-reverse}:host(.granite-toggle-switch-label-before) .granite-toggle-switch-text{padding-inline-start:0;padding-inline-end:var(--granite-spacing-8)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: GraniteToggleSwitchComponent, selector: "granite-toggle-switch", inputs: { id: "id", checked: "checked", disabled: "disabled", readonly: "readonly", labelPosition: "labelPosition", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"] }, outputs: { valueChange: "valueChange", toggleChange: "toggleChange", toggleBlur: "toggleBlur" }, host: { properties: { "class.granite-toggle-switch-checked": "checked", "class.granite-toggle-switch-disabled": "disabled", "class.granite-toggle-switch-readonly": "readonly", "class.granite-toggle-switch-label-before": "_positionBefore" }, classAttribute: "granite-toggle-switch" }, viewQueries: [{ propertyName: "_inputElement", first: true, predicate: ["input"], descendants: true }], exportAs: ["graniteToggleSwitch"], usesOnChanges: true, ngImport: i0, template: "<label [attr.for]=\"id\" class=\"granite-toggle-switch-label\">\n  <div class=\"granite-toggle-switch-bar\">\n    <input\n      #input\n      [id]=\"id\"\n      class=\"granite-toggle-switch-input cdk-visually-hidden\"\n      role=\"switch\"\n      type=\"checkbox\"\n      [attr.aria-checked]=\"checked.toString()\"\n      [attr.aria-label]=\"ariaLabel\"\n      [attr.aria-labelledby]=\"ariaLabelledby\"\n      [checked]=\"checked\"\n      [disabled]=\"_toggleSwitchDisabled\"\n      [readonly]=\"readonly\"\n      (click)=\"_toggleSwitchClick()\"\n      (change)=\"_toggleSwitchChange()\"\n      (blur)=\"_onBlur()\"\n    />\n    <div class=\"granite-toggle-switch-thumb\"></div>\n  </div>\n  <span class=\"granite-toggle-switch-text\"><ng-content></ng-content></span>\n</label>\n", styles: [".cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] .cdk-visually-hidden{left:auto;right:0}:host{box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit;cursor:pointer}:host(.granite-toggle-switch){color:var(--granite-color-text)}.granite-toggle-switch-bar{width:2rem;height:1rem;border-radius:.5rem;background-color:var(--granite-color-background-inactive);transition:background-color .1s linear;position:relative}.granite-toggle-switch-bar:focus-within{outline:var(--granite-spacing-2) solid var(--granite-color-focus);outline-offset:var(--granite-spacing-2);box-shadow:none}.granite-toggle-switch-thumb{width:1rem;height:1rem;border-radius:1rem;background-color:var(--granite-color-text-static-light);border:.0625rem solid var(--granite-color-background-inactive);transition:float .1s linear}html[dir=ltr] .granite-toggle-switch-thumb{float:left}:host-context([dir=ltr]) .granite-toggle-switch-thumb{float:left}html[dir=rtl] .granite-toggle-switch-thumb{float:right}:host-context([dir=rtl]) .granite-toggle-switch-thumb{float:right}:host(.granite-toggle-switch-checked) .granite-toggle-switch-bar{background-color:var(--granite-color-background-active)}:host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{border:.0625rem solid var(--granite-color-background-active)}html[dir=ltr] :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:right}:host-context([dir=ltr]) :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:right}html[dir=rtl] :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:left}:host-context([dir=rtl]) :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:left}.granite-toggle-switch-label{display:flex;align-items:center;width:max-content;padding-block:var(--granite-spacing-4)}:host(.granite-toggle-switch-disabled) .granite-toggle-switch-label{opacity:.6}:host(.granite-toggle-switch-disabled) *{cursor:default}:host(.granite-toggle-switch-readonly) *{cursor:default}.granite-toggle-switch-text{padding-inline-start:var(--granite-spacing-8);font-size:var(--granite-font-size-body-small)}.granite-toggle-switch-text:empty{display:none}:host(.granite-toggle-switch-label-before) .granite-toggle-switch-label{flex-direction:row-reverse}:host(.granite-toggle-switch-label-before) .granite-toggle-switch-text{padding-inline-start:0;padding-inline-end:var(--granite-spacing-8)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteToggleSwitchComponent, decorators: [{
             type: Component,
@@ -70,7 +70,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
                         '[class.granite-toggle-switch-disabled]': 'disabled',
                         '[class.granite-toggle-switch-readonly]': 'readonly',
                         '[class.granite-toggle-switch-label-before]': '_positionBefore',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label [attr.for]=\"id\" class=\"granite-toggle-switch-label\">\n  <div class=\"granite-toggle-switch-bar\">\n    <input\n      #input\n      [id]=\"id\"\n      class=\"granite-toggle-switch-input cdk-visually-hidden\"\n      role=\"switch\"\n      type=\"checkbox\"\n      [attr.aria-checked]=\"checked.toString()\"\n      [attr.aria-label]=\"ariaLabel\"\n      [attr.aria-labelledby]=\"ariaLabelledby\"\n      [checked]=\"checked\"\n      [disabled]=\"_toggleSwitchDisabled\"\n      [readonly]=\"readonly\"\n      (click)=\"_toggleSwitchClick()\"\n      (change)=\"_toggleSwitchChange()\"\n      (blur)=\"_onBlur()\"\n    />\n    <div class=\"granite-toggle-switch-thumb\"></div>\n  </div>\n  <span class=\"granite-toggle-switch-text\"><ng-content></ng-content></span>\n</label>\n", styles: [".cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] .cdk-visually-hidden{left:auto;right:0}:host{box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit;cursor:pointer}:host(.granite-toggle-switch){color:var(--granite-color-text)}.granite-toggle-switch-bar{width:2rem;height:1rem;border-radius:.5rem;background-color:var(--granite-color-background-inactive);transition:background-color .1s linear;position:relative}.granite-toggle-switch-bar:focus-within{box-shadow:0 0 0 .0625rem var(--granite-color-focus)}.granite-toggle-switch-thumb{width:1rem;height:1rem;border-radius:1rem;background-color:var(--granite-color-text-static-light);border:.0625rem solid var(--granite-color-background-inactive);transition:float .1s linear}html[dir=ltr] .granite-toggle-switch-thumb{float:left}:host-context([dir=ltr]) .granite-toggle-switch-thumb{float:left}html[dir=rtl] .granite-toggle-switch-thumb{float:right}:host-context([dir=rtl]) .granite-toggle-switch-thumb{float:right}:host(.granite-toggle-switch-checked) .granite-toggle-switch-bar{background-color:var(--granite-color-background-active)}:host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{border:.0625rem solid var(--granite-color-background-active)}html[dir=ltr] :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:right}:host-context([dir=ltr]) :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:right}html[dir=rtl] :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:left}:host-context([dir=rtl]) :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:left}.granite-toggle-switch-label{display:flex;align-items:center;width:max-content}:host(.granite-toggle-switch-disabled) .granite-toggle-switch-label{opacity:.6}:host(.granite-toggle-switch-disabled) *{cursor:default}:host(.granite-toggle-switch-readonly) *{cursor:default}.granite-toggle-switch-text{padding-inline-start:var(--granite-spacing-8);font-size:var(--granite-font-size-body-small)}.granite-toggle-switch-text:empty{display:none}:host(.granite-toggle-switch-label-before) .granite-toggle-switch-label{flex-direction:row-reverse}:host(.granite-toggle-switch-label-before) .granite-toggle-switch-text{padding-inline-start:0;padding-inline-end:var(--granite-spacing-8)}\n"] }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label [attr.for]=\"id\" class=\"granite-toggle-switch-label\">\n  <div class=\"granite-toggle-switch-bar\">\n    <input\n      #input\n      [id]=\"id\"\n      class=\"granite-toggle-switch-input cdk-visually-hidden\"\n      role=\"switch\"\n      type=\"checkbox\"\n      [attr.aria-checked]=\"checked.toString()\"\n      [attr.aria-label]=\"ariaLabel\"\n      [attr.aria-labelledby]=\"ariaLabelledby\"\n      [checked]=\"checked\"\n      [disabled]=\"_toggleSwitchDisabled\"\n      [readonly]=\"readonly\"\n      (click)=\"_toggleSwitchClick()\"\n      (change)=\"_toggleSwitchChange()\"\n      (blur)=\"_onBlur()\"\n    />\n    <div class=\"granite-toggle-switch-thumb\"></div>\n  </div>\n  <span class=\"granite-toggle-switch-text\"><ng-content></ng-content></span>\n</label>\n", styles: [".cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] .cdk-visually-hidden{left:auto;right:0}:host{box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit;cursor:pointer}:host(.granite-toggle-switch){color:var(--granite-color-text)}.granite-toggle-switch-bar{width:2rem;height:1rem;border-radius:.5rem;background-color:var(--granite-color-background-inactive);transition:background-color .1s linear;position:relative}.granite-toggle-switch-bar:focus-within{outline:var(--granite-spacing-2) solid var(--granite-color-focus);outline-offset:var(--granite-spacing-2);box-shadow:none}.granite-toggle-switch-thumb{width:1rem;height:1rem;border-radius:1rem;background-color:var(--granite-color-text-static-light);border:.0625rem solid var(--granite-color-background-inactive);transition:float .1s linear}html[dir=ltr] .granite-toggle-switch-thumb{float:left}:host-context([dir=ltr]) .granite-toggle-switch-thumb{float:left}html[dir=rtl] .granite-toggle-switch-thumb{float:right}:host-context([dir=rtl]) .granite-toggle-switch-thumb{float:right}:host(.granite-toggle-switch-checked) .granite-toggle-switch-bar{background-color:var(--granite-color-background-active)}:host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{border:.0625rem solid var(--granite-color-background-active)}html[dir=ltr] :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:right}:host-context([dir=ltr]) :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:right}html[dir=rtl] :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:left}:host-context([dir=rtl]) :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:left}.granite-toggle-switch-label{display:flex;align-items:center;width:max-content;padding-block:var(--granite-spacing-4)}:host(.granite-toggle-switch-disabled) .granite-toggle-switch-label{opacity:.6}:host(.granite-toggle-switch-disabled) *{cursor:default}:host(.granite-toggle-switch-readonly) *{cursor:default}.granite-toggle-switch-text{padding-inline-start:var(--granite-spacing-8);font-size:var(--granite-font-size-body-small)}.granite-toggle-switch-text:empty{display:none}:host(.granite-toggle-switch-label-before) .granite-toggle-switch-label{flex-direction:row-reverse}:host(.granite-toggle-switch-label-before) .granite-toggle-switch-text{padding-inline-start:0;padding-inline-end:var(--granite-spacing-8)}\n"] }]
         }], ctorParameters: () => [{ type: i1.FocusMonitor }], propDecorators: { id: [{
                 type: Input
             }], checked: [{

package/fesm2022/ifsworld-granite-components.mjs CHANGED Viewed

@@ -418,14 +418,14 @@ class GraniteBadgeComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteBadgeComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: GraniteBadgeComponent, selector: "granite-badge", inputs: { backgroundColor: "backgroundColor", color: "color", pill: "pill" }, host: { properties: { "class.granite-badge-pill": "pill" }, classAttribute: "granite-badge" }, exportAs: ["graniteBadge"], usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:-moz-inline-flex;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;align-items:center;background-color:var(--granite-color-signal-neutral);color:var(--granite-color-text-static-light);border-radius:var(--granite-radius-s);font-size:var(--granite-font-size-body-small);padding-inline:var(--granite-spacing-8);padding-block:var(--granite-spacing-4)}:host(.granite-badge-pill){border-radius:var(--granite-radius-l)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: GraniteBadgeComponent, selector: "granite-badge", inputs: { backgroundColor: "backgroundColor", color: "color", pill: "pill" }, host: { properties: { "class.granite-badge-pill": "pill" }, classAttribute: "granite-badge" }, exportAs: ["graniteBadge"], usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{overflow:hidden;-ms-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;display:block;align-items:center;background-color:var(--granite-color-signal-neutral);color:var(--granite-color-text-static-light);border-radius:var(--granite-radius-s);font-size:var(--granite-font-size-body-small);padding-inline:var(--granite-spacing-8);padding-block:var(--granite-spacing-4);max-width:-moz-fit-content;max-width:fit-content}:host(.granite-badge-pill){border-radius:var(--granite-radius-l)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteBadgeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'granite-badge', exportAs: 'graniteBadge', host: {
                         class: 'granite-badge',
                         '[class.granite-badge-pill]': 'pill',
-                    }, template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:-moz-inline-flex;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;align-items:center;background-color:var(--granite-color-signal-neutral);color:var(--granite-color-text-static-light);border-radius:var(--granite-radius-s);font-size:var(--granite-font-size-body-small);padding-inline:var(--granite-spacing-8);padding-block:var(--granite-spacing-4)}:host(.granite-badge-pill){border-radius:var(--granite-radius-l)}\n"] }]
+                    }, template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{overflow:hidden;-ms-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;display:block;align-items:center;background-color:var(--granite-color-signal-neutral);color:var(--granite-color-text-static-light);border-radius:var(--granite-radius-s);font-size:var(--granite-font-size-body-small);padding-inline:var(--granite-spacing-8);padding-block:var(--granite-spacing-4);max-width:-moz-fit-content;max-width:fit-content}:host(.granite-badge-pill){border-radius:var(--granite-radius-l)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { backgroundColor: [{
                 type: Input
             }], color: [{
@@ -2256,7 +2256,7 @@ class GraniteToggleSwitchComponent {
         return this._inputElement.nativeElement;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteToggleSwitchComponent, deps: [{ token: i1.FocusMonitor }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: GraniteToggleSwitchComponent, selector: "granite-toggle-switch", inputs: { id: "id", checked: "checked", disabled: "disabled", readonly: "readonly", labelPosition: "labelPosition", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"] }, outputs: { valueChange: "valueChange", toggleChange: "toggleChange", toggleBlur: "toggleBlur" }, host: { properties: { "class.granite-toggle-switch-checked": "checked", "class.granite-toggle-switch-disabled": "disabled", "class.granite-toggle-switch-readonly": "readonly", "class.granite-toggle-switch-label-before": "_positionBefore" }, classAttribute: "granite-toggle-switch" }, viewQueries: [{ propertyName: "_inputElement", first: true, predicate: ["input"], descendants: true }], exportAs: ["graniteToggleSwitch"], usesOnChanges: true, ngImport: i0, template: "<label [attr.for]=\"id\" class=\"granite-toggle-switch-label\">\n  <div class=\"granite-toggle-switch-bar\">\n    <input\n      #input\n      [id]=\"id\"\n      class=\"granite-toggle-switch-input cdk-visually-hidden\"\n      role=\"switch\"\n      type=\"checkbox\"\n      [attr.aria-checked]=\"checked.toString()\"\n      [attr.aria-label]=\"ariaLabel\"\n      [attr.aria-labelledby]=\"ariaLabelledby\"\n      [checked]=\"checked\"\n      [disabled]=\"_toggleSwitchDisabled\"\n      [readonly]=\"readonly\"\n      (click)=\"_toggleSwitchClick()\"\n      (change)=\"_toggleSwitchChange()\"\n      (blur)=\"_onBlur()\"\n    />\n    <div class=\"granite-toggle-switch-thumb\"></div>\n  </div>\n  <span class=\"granite-toggle-switch-text\"><ng-content></ng-content></span>\n</label>\n", styles: [".cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] .cdk-visually-hidden{left:auto;right:0}:host{box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit;cursor:pointer}:host(.granite-toggle-switch){color:var(--granite-color-text)}.granite-toggle-switch-bar{width:2rem;height:1rem;border-radius:.5rem;background-color:var(--granite-color-background-inactive);transition:background-color .1s linear;position:relative}.granite-toggle-switch-bar:focus-within{box-shadow:0 0 0 .0625rem var(--granite-color-focus)}.granite-toggle-switch-thumb{width:1rem;height:1rem;border-radius:1rem;background-color:var(--granite-color-text-static-light);border:.0625rem solid var(--granite-color-background-inactive);transition:float .1s linear}html[dir=ltr] .granite-toggle-switch-thumb{float:left}:host-context([dir=ltr]) .granite-toggle-switch-thumb{float:left}html[dir=rtl] .granite-toggle-switch-thumb{float:right}:host-context([dir=rtl]) .granite-toggle-switch-thumb{float:right}:host(.granite-toggle-switch-checked) .granite-toggle-switch-bar{background-color:var(--granite-color-background-active)}:host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{border:.0625rem solid var(--granite-color-background-active)}html[dir=ltr] :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:right}:host-context([dir=ltr]) :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:right}html[dir=rtl] :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:left}:host-context([dir=rtl]) :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:left}.granite-toggle-switch-label{display:flex;align-items:center;width:max-content}:host(.granite-toggle-switch-disabled) .granite-toggle-switch-label{opacity:.6}:host(.granite-toggle-switch-disabled) *{cursor:default}:host(.granite-toggle-switch-readonly) *{cursor:default}.granite-toggle-switch-text{padding-inline-start:var(--granite-spacing-8);font-size:var(--granite-font-size-body-small)}.granite-toggle-switch-text:empty{display:none}:host(.granite-toggle-switch-label-before) .granite-toggle-switch-label{flex-direction:row-reverse}:host(.granite-toggle-switch-label-before) .granite-toggle-switch-text{padding-inline-start:0;padding-inline-end:var(--granite-spacing-8)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: GraniteToggleSwitchComponent, selector: "granite-toggle-switch", inputs: { id: "id", checked: "checked", disabled: "disabled", readonly: "readonly", labelPosition: "labelPosition", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"] }, outputs: { valueChange: "valueChange", toggleChange: "toggleChange", toggleBlur: "toggleBlur" }, host: { properties: { "class.granite-toggle-switch-checked": "checked", "class.granite-toggle-switch-disabled": "disabled", "class.granite-toggle-switch-readonly": "readonly", "class.granite-toggle-switch-label-before": "_positionBefore" }, classAttribute: "granite-toggle-switch" }, viewQueries: [{ propertyName: "_inputElement", first: true, predicate: ["input"], descendants: true }], exportAs: ["graniteToggleSwitch"], usesOnChanges: true, ngImport: i0, template: "<label [attr.for]=\"id\" class=\"granite-toggle-switch-label\">\n  <div class=\"granite-toggle-switch-bar\">\n    <input\n      #input\n      [id]=\"id\"\n      class=\"granite-toggle-switch-input cdk-visually-hidden\"\n      role=\"switch\"\n      type=\"checkbox\"\n      [attr.aria-checked]=\"checked.toString()\"\n      [attr.aria-label]=\"ariaLabel\"\n      [attr.aria-labelledby]=\"ariaLabelledby\"\n      [checked]=\"checked\"\n      [disabled]=\"_toggleSwitchDisabled\"\n      [readonly]=\"readonly\"\n      (click)=\"_toggleSwitchClick()\"\n      (change)=\"_toggleSwitchChange()\"\n      (blur)=\"_onBlur()\"\n    />\n    <div class=\"granite-toggle-switch-thumb\"></div>\n  </div>\n  <span class=\"granite-toggle-switch-text\"><ng-content></ng-content></span>\n</label>\n", styles: [".cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] .cdk-visually-hidden{left:auto;right:0}:host{box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit;cursor:pointer}:host(.granite-toggle-switch){color:var(--granite-color-text)}.granite-toggle-switch-bar{width:2rem;height:1rem;border-radius:.5rem;background-color:var(--granite-color-background-inactive);transition:background-color .1s linear;position:relative}.granite-toggle-switch-bar:focus-within{outline:var(--granite-spacing-2) solid var(--granite-color-focus);outline-offset:var(--granite-spacing-2);box-shadow:none}.granite-toggle-switch-thumb{width:1rem;height:1rem;border-radius:1rem;background-color:var(--granite-color-text-static-light);border:.0625rem solid var(--granite-color-background-inactive);transition:float .1s linear}html[dir=ltr] .granite-toggle-switch-thumb{float:left}:host-context([dir=ltr]) .granite-toggle-switch-thumb{float:left}html[dir=rtl] .granite-toggle-switch-thumb{float:right}:host-context([dir=rtl]) .granite-toggle-switch-thumb{float:right}:host(.granite-toggle-switch-checked) .granite-toggle-switch-bar{background-color:var(--granite-color-background-active)}:host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{border:.0625rem solid var(--granite-color-background-active)}html[dir=ltr] :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:right}:host-context([dir=ltr]) :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:right}html[dir=rtl] :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:left}:host-context([dir=rtl]) :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:left}.granite-toggle-switch-label{display:flex;align-items:center;width:max-content;padding-block:var(--granite-spacing-4)}:host(.granite-toggle-switch-disabled) .granite-toggle-switch-label{opacity:.6}:host(.granite-toggle-switch-disabled) *{cursor:default}:host(.granite-toggle-switch-readonly) *{cursor:default}.granite-toggle-switch-text{padding-inline-start:var(--granite-spacing-8);font-size:var(--granite-font-size-body-small)}.granite-toggle-switch-text:empty{display:none}:host(.granite-toggle-switch-label-before) .granite-toggle-switch-label{flex-direction:row-reverse}:host(.granite-toggle-switch-label-before) .granite-toggle-switch-text{padding-inline-start:0;padding-inline-end:var(--granite-spacing-8)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteToggleSwitchComponent, decorators: [{
             type: Component,
@@ -2266,7 +2266,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
                         '[class.granite-toggle-switch-disabled]': 'disabled',
                         '[class.granite-toggle-switch-readonly]': 'readonly',
                         '[class.granite-toggle-switch-label-before]': '_positionBefore',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label [attr.for]=\"id\" class=\"granite-toggle-switch-label\">\n  <div class=\"granite-toggle-switch-bar\">\n    <input\n      #input\n      [id]=\"id\"\n      class=\"granite-toggle-switch-input cdk-visually-hidden\"\n      role=\"switch\"\n      type=\"checkbox\"\n      [attr.aria-checked]=\"checked.toString()\"\n      [attr.aria-label]=\"ariaLabel\"\n      [attr.aria-labelledby]=\"ariaLabelledby\"\n      [checked]=\"checked\"\n      [disabled]=\"_toggleSwitchDisabled\"\n      [readonly]=\"readonly\"\n      (click)=\"_toggleSwitchClick()\"\n      (change)=\"_toggleSwitchChange()\"\n      (blur)=\"_onBlur()\"\n    />\n    <div class=\"granite-toggle-switch-thumb\"></div>\n  </div>\n  <span class=\"granite-toggle-switch-text\"><ng-content></ng-content></span>\n</label>\n", styles: [".cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] .cdk-visually-hidden{left:auto;right:0}:host{box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit;cursor:pointer}:host(.granite-toggle-switch){color:var(--granite-color-text)}.granite-toggle-switch-bar{width:2rem;height:1rem;border-radius:.5rem;background-color:var(--granite-color-background-inactive);transition:background-color .1s linear;position:relative}.granite-toggle-switch-bar:focus-within{box-shadow:0 0 0 .0625rem var(--granite-color-focus)}.granite-toggle-switch-thumb{width:1rem;height:1rem;border-radius:1rem;background-color:var(--granite-color-text-static-light);border:.0625rem solid var(--granite-color-background-inactive);transition:float .1s linear}html[dir=ltr] .granite-toggle-switch-thumb{float:left}:host-context([dir=ltr]) .granite-toggle-switch-thumb{float:left}html[dir=rtl] .granite-toggle-switch-thumb{float:right}:host-context([dir=rtl]) .granite-toggle-switch-thumb{float:right}:host(.granite-toggle-switch-checked) .granite-toggle-switch-bar{background-color:var(--granite-color-background-active)}:host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{border:.0625rem solid var(--granite-color-background-active)}html[dir=ltr] :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:right}:host-context([dir=ltr]) :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:right}html[dir=rtl] :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:left}:host-context([dir=rtl]) :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:left}.granite-toggle-switch-label{display:flex;align-items:center;width:max-content}:host(.granite-toggle-switch-disabled) .granite-toggle-switch-label{opacity:.6}:host(.granite-toggle-switch-disabled) *{cursor:default}:host(.granite-toggle-switch-readonly) *{cursor:default}.granite-toggle-switch-text{padding-inline-start:var(--granite-spacing-8);font-size:var(--granite-font-size-body-small)}.granite-toggle-switch-text:empty{display:none}:host(.granite-toggle-switch-label-before) .granite-toggle-switch-label{flex-direction:row-reverse}:host(.granite-toggle-switch-label-before) .granite-toggle-switch-text{padding-inline-start:0;padding-inline-end:var(--granite-spacing-8)}\n"] }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label [attr.for]=\"id\" class=\"granite-toggle-switch-label\">\n  <div class=\"granite-toggle-switch-bar\">\n    <input\n      #input\n      [id]=\"id\"\n      class=\"granite-toggle-switch-input cdk-visually-hidden\"\n      role=\"switch\"\n      type=\"checkbox\"\n      [attr.aria-checked]=\"checked.toString()\"\n      [attr.aria-label]=\"ariaLabel\"\n      [attr.aria-labelledby]=\"ariaLabelledby\"\n      [checked]=\"checked\"\n      [disabled]=\"_toggleSwitchDisabled\"\n      [readonly]=\"readonly\"\n      (click)=\"_toggleSwitchClick()\"\n      (change)=\"_toggleSwitchChange()\"\n      (blur)=\"_onBlur()\"\n    />\n    <div class=\"granite-toggle-switch-thumb\"></div>\n  </div>\n  <span class=\"granite-toggle-switch-text\"><ng-content></ng-content></span>\n</label>\n", styles: [".cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] .cdk-visually-hidden{left:auto;right:0}:host{box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit;cursor:pointer}:host(.granite-toggle-switch){color:var(--granite-color-text)}.granite-toggle-switch-bar{width:2rem;height:1rem;border-radius:.5rem;background-color:var(--granite-color-background-inactive);transition:background-color .1s linear;position:relative}.granite-toggle-switch-bar:focus-within{outline:var(--granite-spacing-2) solid var(--granite-color-focus);outline-offset:var(--granite-spacing-2);box-shadow:none}.granite-toggle-switch-thumb{width:1rem;height:1rem;border-radius:1rem;background-color:var(--granite-color-text-static-light);border:.0625rem solid var(--granite-color-background-inactive);transition:float .1s linear}html[dir=ltr] .granite-toggle-switch-thumb{float:left}:host-context([dir=ltr]) .granite-toggle-switch-thumb{float:left}html[dir=rtl] .granite-toggle-switch-thumb{float:right}:host-context([dir=rtl]) .granite-toggle-switch-thumb{float:right}:host(.granite-toggle-switch-checked) .granite-toggle-switch-bar{background-color:var(--granite-color-background-active)}:host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{border:.0625rem solid var(--granite-color-background-active)}html[dir=ltr] :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:right}:host-context([dir=ltr]) :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:right}html[dir=rtl] :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:left}:host-context([dir=rtl]) :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:left}.granite-toggle-switch-label{display:flex;align-items:center;width:max-content;padding-block:var(--granite-spacing-4)}:host(.granite-toggle-switch-disabled) .granite-toggle-switch-label{opacity:.6}:host(.granite-toggle-switch-disabled) *{cursor:default}:host(.granite-toggle-switch-readonly) *{cursor:default}.granite-toggle-switch-text{padding-inline-start:var(--granite-spacing-8);font-size:var(--granite-font-size-body-small)}.granite-toggle-switch-text:empty{display:none}:host(.granite-toggle-switch-label-before) .granite-toggle-switch-label{flex-direction:row-reverse}:host(.granite-toggle-switch-label-before) .granite-toggle-switch-text{padding-inline-start:0;padding-inline-end:var(--granite-spacing-8)}\n"] }]
         }], ctorParameters: () => [{ type: i1.FocusMonitor }], propDecorators: { id: [{
                 type: Input
             }], checked: [{
@@ -4113,9 +4113,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
             }] } });
 class GraniteEmptyAvatarComponent {
+    constructor() {
+        this.ariaLabel = null;
+    }
     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: { initials: "initials" }, host: { classAttribute: "granite-empty-avatar" }, ngImport: i0, template: `
-    <div class="no-profile-avatar">
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: GraniteEmptyAvatarComponent, selector: "granite-empty-avatar", inputs: { initials: "initials", ariaLabel: ["aria-label", "ariaLabel"] }, host: { classAttribute: "granite-empty-avatar" }, ngImport: i0, template: `
+    <div class="no-profile-avatar" [attr.aria-label]="ariaLabel" role="img">
       <span
         data-fnd="no-profile-avatar-initials"
         class="no-profile-avatar-initials"
@@ -4129,7 +4132,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
             args: [{ selector: 'granite-empty-avatar', host: {
                         class: 'granite-empty-avatar',
                     }, template: `
-    <div class="no-profile-avatar">
+    <div class="no-profile-avatar" [attr.aria-label]="ariaLabel" role="img">
       <span
         data-fnd="no-profile-avatar-initials"
         class="no-profile-avatar-initials"
@@ -4139,20 +4142,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
   `, 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: { initials: [{
                 type: Input
+            }], ariaLabel: [{
+                type: Input,
+                args: ['aria-label']
             }] } });
 class GraniteAvatarComponent extends ContactsTriggerDataComponent {
     constructor(cd) {
         super();
         this.cd = cd;
+        this.ariaLabel = null;
+        this.avatarAriaLabel = '';
     }
     ngOnChanges(changes) {
-        if (changes.firstName || changes.lastName || changes.name) {
-            this._nameInitials = NamesUtilsService.buildNameData({
+        if (changes.firstName ||
+            changes.lastName ||
+            changes.name ||
+            changes.ariaLabel) {
+            const nameData = NamesUtilsService.buildNameData({
                 firstName: changes.firstName?.currentValue,
                 lastName: changes.lastName?.currentValue,
                 name: changes.name?.currentValue,
-            }).initials;
+            });
+            this._nameInitials = nameData?.initials;
+            this.avatarAriaLabel =
+                changes.ariaLabel?.currentValue ??
+                    `${nameData?.firstName ?? ''} ${nameData?.lastName ?? ''}`.trim();
             this.cd.markForCheck();
         }
     }
@@ -4167,13 +4182,13 @@ class GraniteAvatarComponent extends ContactsTriggerDataComponent {
         }, {});
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteAvatarComponent, deps: [{ token: i0.ChangeDetectorRef }], 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", firstName: "firstName", lastName: "lastName", avatar: "avatar", status: "status" }, host: { classAttribute: "granite-avatar" }, queries: [{ propertyName: "_customStatusesQueryList", predicate: GraniteCustomAvatarStatusDirective }], exportAs: ["graniteAvatar"], usesInheritance: true, usesOnChanges: 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    [initials]=\"_nameInitials\"\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: ["initials"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: GraniteAvatarComponent, selector: "granite-avatar", inputs: { name: "name", firstName: "firstName", lastName: "lastName", avatar: "avatar", status: "status", ariaLabel: ["aria-label", "ariaLabel"] }, host: { classAttribute: "granite-avatar" }, queries: [{ propertyName: "_customStatusesQueryList", predicate: GraniteCustomAvatarStatusDirective }], exportAs: ["graniteAvatar"], usesInheritance: true, usesOnChanges: 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  [attr.aria-label]=\"avatarAriaLabel\"\n/>\n\n<ng-template #noProfileAvatar>\n  <granite-empty-avatar\n    class=\"profile-size\"\n    [initials]=\"_nameInitials\"\n    [aria-label]=\"avatarAriaLabel\"\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: ["initials", "aria-label"] }], 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    [initials]=\"_nameInitials\"\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"] }]
+                    }, 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  [attr.aria-label]=\"avatarAriaLabel\"\n/>\n\n<ng-template #noProfileAvatar>\n  <granite-empty-avatar\n    class=\"profile-size\"\n    [initials]=\"_nameInitials\"\n    [aria-label]=\"avatarAriaLabel\"\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"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { name: [{
                 type: Input
             }], firstName: [{
@@ -4184,6 +4199,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
                 type: Input
             }], status: [{
                 type: Input
+            }], ariaLabel: [{
+                type: Input,
+                args: ['aria-label']
             }], _customStatusesQueryList: [{
                 type: ContentChildren,
                 args: [GraniteCustomAvatarStatusDirective]
@@ -4191,7 +4209,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
 class GraniteContactsProfileComponent {
     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" }, ngImport: i0, template: "<div [class]=\"profileClass\" data-fnd=\"profile\" class=\"profile\">\n  <granite-avatar\n    data-fnd=\"profile-avatar\"\n    class=\"profile-avatar\"\n    [firstName]=\"profile.firstName\"\n    [lastName]=\"profile.lastName\"\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        >{{ profile?.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?.firstName }} {{ profile?.lastName }}\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", "firstName", "lastName", "avatar", "status"], exportAs: ["graniteAvatar"] }], 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" }, ngImport: i0, template: "<div [class]=\"profileClass\" data-fnd=\"profile\" class=\"profile\">\n  <granite-avatar\n    data-fnd=\"profile-avatar\"\n    class=\"profile-avatar\"\n    [firstName]=\"profile.firstName\"\n    [lastName]=\"profile.lastName\"\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        >{{ profile?.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?.firstName }} {{ profile?.lastName }}\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", "firstName", "lastName", "avatar", "status", "aria-label"], exportAs: ["graniteAvatar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteContactsProfileComponent, decorators: [{
             type: Component,