feat: avatar component

Co-authored-by: mino89 <pierdomenicoreitano@gmail.com>
Co-authored-by: Cristian <borelli.developer@gmail.com>

.angulardoc.json

@@ -0,0 +1,4 @@
+{
+  "repoId": "55c39ea7-0cdf-49f3-82f3-9b5e961c11c1",
+  "lastSync": 0
+}

projects/design-angular-kit/src/lib/components/components.module.ts

@@ -1,6 +1,9 @@
 import { NgModule } from '@angular/core';
 import { ItAccordionComponent } from './core/accordion/accordion.component';
 import { ItAlertComponent } from './core/alert/alert.component';
+import { ItAvatarDropdownComponent, ItAvatarDropdownItemComponent } from './core/avatar/avatar-dropdown/avatar-dropdown.component';
+import { ItAvatarGroupItemComponent, ItAvatarGroupComponent } from './core/avatar/avatar-group/avatar-group.component';
+import { ItAvatarDirective } from './core/avatar/avatar.directive'
 import { ItBadgeDirective } from './core/badge/badge.directive';
 import { ItButtonDirective } from './core/button/button.directive';
 import { ItCalloutComponent } from './core/callout/callout.component';
@@ -41,6 +44,11 @@ import { MarkMatchingTextPipe } from '../pipes/mark-matching-text.pipe';
 const core = [
   ItAccordionComponent,
   ItAlertComponent,
+  ItAvatarGroupItemComponent, 
+  ItAvatarGroupComponent,
+  ItAvatarDropdownComponent,
+  ItAvatarDropdownItemComponent,
+  ItAvatarDirective,
   ItBadgeDirective,
   ItButtonDirective,
   ItCalloutComponent,

projects/design-angular-kit/src/lib/components/core/avatar/avatar-dropdown/avatar-dropdown-item.component.html

@@ -0,0 +1,3 @@
+<ng-template>
+  <ng-content></ng-content>
+</ng-template>

projects/design-angular-kit/src/lib/components/core/avatar/avatar-dropdown/avatar-dropdown.component.html

@@ -0,0 +1,23 @@
+<it-dropdown id="dropdown" class="dropdown">  
+  <a button role="button" class="" aria-pressed="false">
+    <ng-content select="[it-avatar-dropdown-toggle]"></ng-content>
+  </a>
+  <ng-container list class="dropdown-menu">
+    <li it-dropdown-item *ngFor="let item of items">
+      <a *ngIf="item.link; else nolink" 
+      [routerLink]="item.link" 
+      class="dropdown-item list-item"
+      title="item.title"
+      accesskey="item.accesskey"
+      tabindex="item.tabindex"
+      >
+        <ng-template *ngTemplateOutlet="item._implicitContent"></ng-template>
+      </a>
+      <ng-template #nolink>
+        <div class="dropdown-item list-item">
+          <ng-template *ngTemplateOutlet="item._implicitContent"></ng-template>
+        </div>
+      </ng-template>
+    </li>
+  </ng-container>
+</it-dropdown>

projects/design-angular-kit/src/lib/components/core/avatar/avatar-dropdown/avatar-dropdown.component.scss

@@ -0,0 +1,17 @@
+// made because of bug with before triangle that goes up 
+.link-list-wrapper{
+  z-index: 2;
+  position: relative;
+}
+
+a {
+  cursor: pointer;
+}
+
+:host ::ng-deep .dropdown-toggle {
+  width: 100%;
+  height: 100%;
+  .icon {
+    display: none;
+  }
+}

projects/design-angular-kit/src/lib/components/core/avatar/avatar-dropdown/avatar-dropdown.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ItAvatarDropdownComponent } from './avatar-dropdown.component';
+import { tb_base } from '../../../../../test';
+
+describe('ItAvatarDropdownComponent', () => {
+  let component: ItAvatarDropdownComponent;
+  let fixture: ComponentFixture<ItAvatarDropdownComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule(tb_base)
+      .compileComponents();
+
+    fixture = TestBed.createComponent(ItAvatarDropdownComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/design-angular-kit/src/lib/components/core/avatar/avatar-dropdown/avatar-dropdown.component.ts

@@ -0,0 +1,44 @@
+import { Component, ViewChild, TemplateRef, ContentChildren, QueryList, Input, ViewEncapsulation } from '@angular/core';
+import { ItDropdownModule } from '../../dropdown/dropdown.module';
+import { NgForOf, NgIf, NgTemplateOutlet } from '@angular/common';
+
+
+@Component({
+  standalone: true,
+  selector: 'it-avatar-dropdown-item',
+  templateUrl: './avatar-dropdown-item.component.html',
+  styleUrls: ['./avatar-dropdown.component.scss'],
+  imports: [NgForOf, NgIf, NgTemplateOutlet]
+})
+export class ItAvatarDropdownItemComponent{
+  @ViewChild(TemplateRef, {static: true}) _implicitContent!: TemplateRef<any>
+  /**
+   * Indica il link che possiamo passare all'elemento
+   */
+  @Input() link?: string | any[] | null | undefined;
+  /**
+   * Permette di utilizzare l'attributo html title
+   */
+  @Input() title?: string
+  /**
+   * Permette di utilizzare l'attributo html accesskey
+   */
+  @Input() accesskey?: string
+    /**
+   * Permette di utilizzare l'attributo html tabindex
+   */
+  @Input() tabindex?: number
+}
+
+@Component({
+  standalone: true,
+  selector: 'it-avatar-dropdown',
+  templateUrl: './avatar-dropdown.component.html',
+  styleUrls: ['./avatar-dropdown.component.scss'],
+  host: { 'class': 'avatar avatar-dropdown' },
+  imports: [ItDropdownModule, NgTemplateOutlet, NgForOf, NgIf]
+})
+export class ItAvatarDropdownComponent{
+  constructor() { }
+  @ContentChildren(ItAvatarDropdownItemComponent) items! : QueryList<ItAvatarDropdownItemComponent>
+}

projects/design-angular-kit/src/lib/components/core/avatar/avatar-group/avatar-group-item.component.html

@@ -0,0 +1,3 @@
+<ng-template>
+  <ng-content></ng-content>
+</ng-template>

projects/design-angular-kit/src/lib/components/core/avatar/avatar-group/avatar-group.component.html

@@ -0,0 +1,5 @@
+<ul class="avatar-group-stacked">
+  <li *ngFor="let avatar of avatars">
+      <ng-container *ngTemplateOutlet="avatar._implicitContent"></ng-container>
+  </li>
+</ul>

projects/design-angular-kit/src/lib/components/core/avatar/avatar-group/avatar-group.component.spec.ts

@@ -0,0 +1,41 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ItAvatarGroupComponent, ItAvatarGroupItemComponent } from './avatar-group.component';
+import { tb_base } from '../../../../../test';
+
+describe('ItAvatarGroupComponent', () => {
+  let component: ItAvatarGroupComponent;
+  let fixture: ComponentFixture<ItAvatarGroupComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule(tb_base)
+      .compileComponents();
+
+    fixture = TestBed.createComponent(ItAvatarGroupComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
+
+
+describe('ItAvatarGroupItemComponent', () => {
+  let component: ItAvatarGroupItemComponent;
+  let fixture: ComponentFixture<ItAvatarGroupItemComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule(tb_base)
+      .compileComponents();
+
+    fixture = TestBed.createComponent(ItAvatarGroupItemComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/design-angular-kit/src/lib/components/core/avatar/avatar-group/avatar-group.component.ts

@@ -0,0 +1,28 @@
+import { Component, ContentChildren, QueryList, TemplateRef, ViewChild } from '@angular/core';
+import { NgForOf, NgTemplateOutlet } from '@angular/common';
+
+
+@Component({
+  standalone: true,
+  selector: 'it-avatar-item',
+  templateUrl: './avatar-group-item.component.html',
+})
+export class ItAvatarGroupItemComponent {
+  constructor(){}
+  @ViewChild(TemplateRef, { static: true }) _implicitContent!: TemplateRef<any>;
+
+}
+
+@Component({
+  standalone: true,
+  selector: 'it-avatar-group',
+  templateUrl: './avatar-group.component.html',
+  host:{
+    '[class.link-list-wrapper]': 'linkList'
+  },
+  imports: [NgForOf, NgTemplateOutlet]
+})
+export class ItAvatarGroupComponent {
+  constructor() {}
+  @ContentChildren(ItAvatarGroupItemComponent) avatars!: QueryList<ItAvatarGroupItemComponent>;
+}

projects/design-angular-kit/src/lib/components/core/avatar/avatar.directive.ts

@@ -0,0 +1,76 @@
+import { ColorsEnum } from '../../../enums/colors.enums';
+import { SizesEnum } from '../../../enums/sizes.enum';
+import { Directive, HostBinding, Input } from "@angular/core";
+
+@Directive({
+  standalone: true,
+  selector: '[itAvatar]',
+  exportAs: 'itAvatar'
+})
+export class ItAvatarDirective {
+  /**
+   * Indica il colore dell'avatar. Può assumere i valori:
+   * <ul>
+   * <li> primary
+   * <li> secondary
+   * <li> green
+   * <li> orange
+   * <li> red
+   * </ul>
+   */
+  @Input()
+  get color(): string | undefined {
+    return this._color
+  }
+  set color(value: string | undefined) {
+    const colorsKey = value as keyof typeof ColorsEnum;
+    if (ColorsEnum[colorsKey]){
+      this._color = ColorsEnum[colorsKey] 
+    }else{
+      this._color = undefined;
+    }
+  }
+  private _color?: ColorsEnum;
+  /**
+   * Indica la grandezza dell'avatar. Può assumere i valori:
+   * <ul>
+   * <li> xs
+   * <li> sm
+   * <li> lg
+   * <li> xl
+   * <li> xxl
+   * </ul>
+   */
+  @Input()
+  get size(): SizesEnum | undefined {
+    return this._size
+  }
+  set size(value: string | undefined) {
+    const sizesKey = value as keyof typeof SizesEnum;
+    if (SizesEnum[sizesKey]) {
+      this._size = SizesEnum[sizesKey];
+    } 
+    else {
+      this._size = undefined
+    }
+  }
+
+  private _size?: SizesEnum;
+
+  @HostBinding('class')
+  get hostClasses(): string {
+    let cssClass = 'avatar'
+
+    if (this.size) {
+      cssClass += ` ${this.size}`
+    }
+
+    if (this.color) {
+      cssClass += ` avatar-${this.color}`
+    }
+
+    return cssClass
+  }
+
+
+}

projects/design-angular-kit/src/lib/enums/colors.enums.ts

@@ -0,0 +1,10 @@
+export enum ColorsEnum {
+  primary = "primary",
+  secondary = "secondary",
+  success = "success",
+  danger = "danger",
+  warning = "warning",
+  green = "green",
+  orange = "orange",
+  red = "red"
+}

projects/design-angular-kit/src/lib/enums/sizes.enum.ts

@@ -0,0 +1,7 @@
+export enum SizesEnum{
+    xs = 'size-xs',
+    sm = 'size-sm',
+    lg = 'size-lg',
+    xl = 'size-xl',
+    xxl = 'size-xxl',
+}

projects/design-angular-kit/src/public_api.ts

@@ -57,6 +57,9 @@ export * from './lib/components/core/tab/tab-item/tab-item.component';
 
 export * from './lib/components/core/table/table.component';
 export * from './lib/components/core/tooltip/tooltip.directive';
+export * from './lib/components/core/avatar/avatar.directive'
+export * from './lib/components/core/avatar/avatar-dropdown/avatar-dropdown.component'
+export * from './lib/components/core/avatar/avatar-group/avatar-group.component'
 
 // Forms components
 export * from './lib/components/form/form.module';

src/app/app-routing.module.ts

@@ -14,6 +14,7 @@ const routes: Routes = [
   ]},
   { path: 'componenti', component: RouterDispatcherComponent, children: [
     { path: '', redirectTo: 'badge', pathMatch: 'full' },
+    { path: 'avatar', loadChildren: () => import('src/app/avatar/avatar.module').then(m => m.AvatarModule) },
     { path: 'badge', loadChildren: () => import('src/app/badge/badge.module').then(m => m.BadgeModule) },
     { path: 'checkbox', loadChildren: () => import('src/app/checkbox/checkbox.module').then(m => m.CheckboxModule) },
     { path: 'progress-bar', loadChildren: () => import('src/app/progress-bar/progress-bar.module').then(m => m.ProgressBarModule) },

src/app/avatar/avatar-example-colors/avatar-example-colors.component.html

@@ -0,0 +1,23 @@
+<h3>Colori Avatar</h3>
+<div class="d-flex align-items-center justify-content-around flex-wrap flex-sm-nowrap bd-example">
+  <div itAvatar size="lg" color="primary">
+    <p aria-hidden="true">MR</p>
+    <span class="visually-hidden">Mario Rossi</span>
+  </div>
+  <div itAvatar size="lg" color="secondary">
+    <p aria-hidden="true">MR</p>
+    <span class="visually-hidden">Mario Rossi</span>
+  </div>
+  <div itAvatar size="lg" color="green">
+    <p aria-hidden="true">MR</p>
+    <span class="visually-hidden">Mario Rossi</span>
+  </div>
+  <div itAvatar size="lg" color="orange">
+    <p aria-hidden="true">MR</p>
+    <span class="visually-hidden">Mario Rossi</span>
+  </div>
+  <div itAvatar size="lg" color="red">
+    <p aria-hidden="true">MR</p>
+    <span class="visually-hidden">Mario Rossi</span>
+  </div>
+</div>

src/app/avatar/avatar-example-colors/avatar-example-colors.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AvatarExampleColorsComponent } from './avatar-example-colors.component';
+
+describe('AvatarExampleColorsComponent', () => {
+  let component: AvatarExampleColorsComponent;
+  let fixture: ComponentFixture<AvatarExampleColorsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AvatarExampleColorsComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AvatarExampleColorsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});