@engie-group/fluid-design-system-angular/src/components/avatar/avatar.component.ts

Fluid Design System Angular

import { CommonModule } from '@angular/common';
import { Component, Input, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
import { Utils } from '../../utils/utils.util';
import { BadgeComponent } from '../badge/badge.component';
import { BadgeEmphasis, BadgeSize, BadgeVariant } from '../badge/badge.model';
import { TooltipDirective } from '../tooltip/directives/tooltip.directive';
import { TooltipOptions } from '../tooltip/tooltip.model';
import { AvatarSize } from './avatar.model';

@Component({
  selector: 'nj-avatar',
  templateUrl: './avatar.component.html',
  encapsulation: ViewEncapsulation.None,
  standalone: true,
  imports: [BadgeComponent, TooltipDirective, CommonModule]
})
export class AvatarComponent {
  private avatarClassName = 'nj-avatar';

  /**
   * Link href, if set avatar is a link <a>
   */
  @Input() href: string;

  /**
   * Initials of avatar, max 3 characters if a string with a bigger length than 3 characters only 3 first characters are taken
   */
  @Input() initials: string;

  /**
   * Text alternative for the avatar
   */
  @Input() label: string;

  /**
   * Avatar size
   */
  @Input() size: AvatarSize;

  /**
   * Whether avatar has a picture or not
   */
  @Input() hasPicture: boolean;

  /**
   * Whether avatar is clickable or not
   */
  @Input() isClickable: boolean;

  /**
   * Notifications number or string
   */
  @Input() notification: number | string;

  /**
   * Max notification number
   */
  @Input() notificationCapedValue: number;

  /**
   * Notification emphasis
   */
  @Input() notificationEmphasis: BadgeEmphasis;

  /**
   * Notification color
   */
  @Input() notificationVariant: BadgeVariant = 'information';

  /**
   * Unit label for `nj-badge`
   */
  @Input() notificationUnitLabel?: string;

  /**
   *  Used for NJAvatarGroup as the last tile of the group
   **/
  @Input() isRemainingCount?: boolean;

  /**
   *  Tooltip's options
   **/
  @Input() tooltipOptions?: TooltipOptions;

  /**
   * @ignore
   */
  @ViewChild('avatarTemplate') avatarTemplate: TemplateRef<any>;

  constructor() {}

  /**
   * @ignore
   */
  getFormattedInitials(): string {
    if (this.initials?.length > 3) {
      return this?.initials.slice(0, 3);
    } else {
      return this.initials;
    }
  }

  /**
   * @ignore
   */
  getBadgeSize(): BadgeSize {
    switch (this.size) {
      case 'xl':
        return 'lg';
      default:
        return 'md';
    }
  }

  /**
   * @ignore
   */
  getAvatarSizeClass(): string {
    return this.size ? `${this.avatarClassName}--${this.size}` : '';
  }

  /**
   * @ignore
   */
  getAvatarDefaultIconClass(): string {
    return !this.hasInitials() && !this.hasPicture ? `${this.avatarClassName}--default-icon` : '';
  }

  /**
   * @ignore
   */
  getAvatarInitialsClass(): string {
    return this.hasInitials() && !this.hasPicture ? `${this.avatarClassName}--initials` : '';
  }

  /**
   * @ignore
   */
  getAvatarIsClickableClass(): string {
    return this.isClickable ? `${this.avatarClassName}--clickable` : '';
  }

  /**
   * @ignore
   */
  getHasPictureClass(): string {
    return this.hasPicture ? `${this.avatarClassName}--picture` : '';
  }

  /**
   * @ignore
   */
  getAvatarIsRemainingCountClass(): string {
    return this.isRemainingCount ? `${this.avatarClassName}--remaining-count` : '';
  }

  /**
   * @ignore
   */
  hasInitials(): boolean {
    return !Utils.isUndefinedOrNull(this.initials) && this.initials?.trim() !== '';
  }

  /**
   * @ignore
   */
  getAvatarClasses(): string[] {
    return [
      this.getAvatarDefaultIconClass(),
      this.getAvatarSizeClass(),
      this.getAvatarInitialsClass(),
      this.getAvatarIsClickableClass(),
      this.getAvatarIsRemainingCountClass(),
      this.getHasPictureClass()
    ];
  }
}