design-angular-kit 1.2.0 → 1.2.1

package/src/lib/components/core/alert/alert.component.spec.ts

@@ -0,0 +1,62 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ItAlertComponent } from './alert.component';
+import { By } from '@angular/platform-browser';
+import { Component, Input } from '@angular/core';
+import { AlertColor } from '../../../interfaces/core';
+
+@Component({
+  selector: 'it-unit-test',
+  template: ` <it-alert [color]="selectedColor" [dismissible]="isDismissible"> Questo è un alert di tipo "<b>primary</b>". </it-alert> `,
+})
+class UnitTestComponent {
+  @Input() set selectedColor(value: AlertColor | undefined) {
+    this._selectedColor = value;
+  }
+  get selectedColor(): AlertColor | undefined {
+    return this._selectedColor;
+  }
+  private _selectedColor: AlertColor | undefined = undefined;
+
+  @Input() set isDismissible(value: boolean) {
+    this._dismissible = value;
+  }
+  get isDismissible(): boolean {
+    return this._dismissible;
+  }
+
+  private _dismissible: boolean = false;
+}
+
+let component: UnitTestComponent;
+let fixture: ComponentFixture<UnitTestComponent>;
+describe('ItAlertComponent', () => {
+  beforeEach(async () => {
+    TestBed.configureTestingModule({
+      declarations: [UnitTestComponent],
+      imports: [ItAlertComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(UnitTestComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('Dovrebbe avere colore primary', () => {
+    component.selectedColor = 'primary';
+    fixture.detectChanges();
+    const spanElement = fixture.debugElement.query(By.css('div.alert.alert-primary'));
+    expect(spanElement).toBeTruthy();
+  });
+
+  it('Dovrebbe avere colore success', () => {
+    component.selectedColor = 'success';
+    fixture.detectChanges();
+    const spanElement = fixture.debugElement.query(By.css('div.alert.alert-success'));
+    expect(spanElement).toBeTruthy();
+  });
+});

package/src/lib/components/core/alert/alert.component.ts

@@ -0,0 +1,75 @@
+import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+import { AlertColor } from '../../../interfaces/core';
+import { ItAbstractComponent } from '../../../abstracts/abstract.component';
+import { Alert } from 'bootstrap-italia';
+import { TranslateModule } from '@ngx-translate/core';
+import { ItIconComponent } from '../../utils/icon/icon.component';
+import { inputToBoolean } from '../../../utils/coercion';
+
+/**
+ * Alert
+ * @description You can provide feedback to the user via alert messages.
+ */
+@Component({
+  standalone: true,
+  selector: 'it-alert',
+  templateUrl: './alert.component.html',
+  styleUrls: ['./alert.component.scss'],
+  exportAs: 'itAlert',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [TranslateModule, ItIconComponent],
+})
+export class ItAlertComponent extends ItAbstractComponent implements AfterViewInit {
+  /**
+   * The alert color
+   * @default info
+   */
+  @Input() color: AlertColor = 'info';
+
+  /**
+   * Inserts the close button
+   * @default false
+   */
+  @Input({ transform: inputToBoolean }) dismissible?: boolean;
+
+  /**
+   * This event fires immediately when the instance's close method is called.
+   */
+  @Output() public closeEvent: EventEmitter<Event> = new EventEmitter();
+
+  /**
+   * This event fires when the alert has been closed (it will wait for CSS transitions to complete).
+   */
+  @Output() public closedEvent: EventEmitter<Event> = new EventEmitter();
+
+  private alert?: Alert;
+
+  @ViewChild('alertElement') private alertElement?: ElementRef<HTMLDivElement>;
+
+  override ngAfterViewInit() {
+    super.ngAfterViewInit();
+
+    if (this.alertElement) {
+      const element = this.alertElement.nativeElement;
+      this.alert = Alert.getOrCreateInstance(element);
+
+      element.addEventListener('close.bs.alert', event => this.closeEvent.emit(event));
+      element.addEventListener('closed.bs.alert', event => this.closedEvent.emit(event));
+    }
+  }
+
+  /**
+   * Close an alert by removing it from the DOM.
+   * If the `.fade` and `.show` classes are present in the element, the alert will be closed with a disappearing effect.
+   */
+  public close(): void {
+    this.alert?.close();
+  }
+
+  /**
+   * The alert is removed
+   */
+  public dispose(): void {
+    this.alert?.dispose();
+  }
+}

package/src/lib/components/core/avatar/avatar-dropdown/avatar-dropdown.component.html

@@ -0,0 +1,23 @@
+<it-dropdown id="dropdown" class="dropdown">
+  <ng-content button select="[it-avatar-dropdown-toggle]"></ng-content>
+  <ng-container list class="dropdown-menu">
+    @for (item of items; track item) {
+      <li>
+        @if (item.link) {
+          <a
+            [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>
+        } @else {
+          <div class="dropdown-item list-item">
+            <ng-template *ngTemplateOutlet="item._implicitContent"></ng-template>
+          </div>
+        }
+      </li>
+    }
+  </ng-container>
+</it-dropdown>

package/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;
+  }
+}

package/src/lib/components/core/avatar/avatar-dropdown/avatar-dropdown.component.spec.ts

@@ -0,0 +1,21 @@
+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();
+  });
+});

package/src/lib/components/core/avatar/avatar-dropdown/avatar-dropdown.component.ts

@@ -0,0 +1,50 @@
+import { Component, ContentChildren, HostBinding, Input, QueryList, TemplateRef, ViewChild } from '@angular/core';
+import { ItDropdownModule } from '../../dropdown/dropdown.module';
+import { NgTemplateOutlet } from '@angular/common';
+import { RouterLink } from '@angular/router';
+
+@Component({
+  standalone: true,
+  selector: 'it-avatar-dropdown-item',
+  template: '<ng-template><ng-content></ng-content></ng-template>',
+  styleUrls: ['./avatar-dropdown.component.scss'],
+  imports: [NgTemplateOutlet],
+})
+export class ItAvatarDropdownItemComponent {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  @ViewChild(TemplateRef, { static: true }) _implicitContent!: TemplateRef<any>;
+
+  /**
+   * Indica il link che possiamo passare all'elemento
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  @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'],
+  imports: [ItDropdownModule, NgTemplateOutlet, RouterLink],
+})
+export class ItAvatarDropdownComponent {
+  @HostBinding('class') componentClass = 'avatar avatar-dropdown';
+
+  @ContentChildren(ItAvatarDropdownItemComponent) items!: QueryList<ItAvatarDropdownItemComponent>;
+}

package/src/lib/components/core/avatar/avatar-group/avatar-group.component.html

@@ -0,0 +1,7 @@
+<ul [class]="linkList ? 'link-list avatar-group' : 'avatar-group-stacked'">
+  @for (avatar of avatars; track avatar) {
+    <li>
+      <ng-container *ngTemplateOutlet="avatar._implicitContent"></ng-container>
+    </li>
+  }
+</ul>

package/src/lib/components/core/avatar/avatar-group/avatar-group.component.spec.ts

@@ -0,0 +1,38 @@
+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();
+  });
+});

package/src/lib/components/core/avatar/avatar-group/avatar-group.component.ts

@@ -0,0 +1,25 @@
+import { Component, ContentChildren, HostBinding, Input, QueryList, TemplateRef, ViewChild } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { inputToBoolean } from '../../../../utils/coercion';
+
+@Component({
+  standalone: true,
+  selector: 'it-avatar-item',
+  template: '<ng-template><ng-content></ng-content></ng-template>',
+})
+export class ItAvatarGroupItemComponent {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  @ViewChild(TemplateRef, { static: true }) _implicitContent!: TemplateRef<any>;
+}
+
+@Component({
+  standalone: true,
+  selector: 'it-avatar-group',
+  templateUrl: './avatar-group.component.html',
+  imports: [NgTemplateOutlet],
+})
+export class ItAvatarGroupComponent {
+  @Input({ transform: inputToBoolean }) @HostBinding('class.link-list-wrapper') linkList = false;
+
+  @ContentChildren(ItAvatarGroupItemComponent) avatars!: QueryList<ItAvatarGroupItemComponent>;
+}

package/src/lib/components/core/avatar/avatar.directive.ts

@@ -0,0 +1,73 @@
+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;
+  }
+}

package/src/lib/components/core/avatar/avatar.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { ItAvatarGroupComponent, ItAvatarGroupItemComponent } from './avatar-group/avatar-group.component';
+import { ItAvatarDropdownComponent, ItAvatarDropdownItemComponent } from './avatar-dropdown/avatar-dropdown.component';
+import { ItAvatarDirective } from './avatar.directive';
+
+const avatarComponents = [
+  ItAvatarGroupItemComponent,
+  ItAvatarGroupComponent,
+  ItAvatarDropdownComponent,
+  ItAvatarDropdownItemComponent,
+  ItAvatarDirective,
+];
+
+@NgModule({
+  imports: avatarComponents,
+  exports: avatarComponents,
+})
+export class ItAvatarModule {}

package/src/lib/components/core/badge/badge.directive.spec.ts

@@ -0,0 +1,59 @@
+import { Component, Input } from '@angular/core';
+import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { BadgeColor } from '../../../interfaces/core';
+import { ItBadgeDirective } from './badge.directive';
+
+@Component({
+  selector: 'it-unit-test',
+  template: `
+    <h5>
+      Testo di esempio <span [itBadge]="selectedColor" [rounded]="isRounded">{{ badgeText }}</span>
+    </h5>
+  `,
+})
+class UnitTestComponent {
+  @Input() set selectedColor(value: BadgeColor | undefined) {
+    this._selectedColor = value;
+  }
+  get selectedColor(): BadgeColor | undefined {
+    return this._selectedColor;
+  }
+  private _selectedColor: BadgeColor | undefined = undefined;
+
+  @Input() set isRounded(value: boolean) {
+    this._isRounded = value;
+  }
+  get isRounded(): boolean {
+    return this._isRounded;
+  }
+  private _isRounded: boolean = undefined;
+}
+
+describe('ItBadgeDirective', () => {
+  let component: UnitTestComponent;
+  let fixture: ComponentFixture<UnitTestComponent>;
+  beforeEach(fakeAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [UnitTestComponent],
+      imports: [ItBadgeDirective],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(UnitTestComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create an instance', () => {
+    const directive = new ItBadgeDirective();
+    expect(directive).toBeTruthy();
+  });
+
+  it('can have color primary and be rounded', () => {
+    component.isRounded = true;
+    component.selectedColor = 'primary';
+    fixture.detectChanges();
+    const spanElement = fixture.debugElement.query(By.css('.badge.rounded-pill.bg-primary'));
+    expect(spanElement).toBeTruthy();
+  });
+});

package/src/lib/components/core/badge/badge.directive.ts

@@ -0,0 +1,39 @@
+import { Directive, HostBinding, Input } from '@angular/core';
+import { BadgeColor } from '../../../interfaces/core';
+import { inputToBoolean } from '../../../utils/coercion';
+
+/**
+ * Badge
+ * @description Useful for small counters and labels
+ */
+@Directive({
+  standalone: true,
+  selector: '[itBadge]',
+  exportAs: 'itBadge',
+})
+export class ItBadgeDirective {
+  /**
+   * Define the badge color
+   * @default undefined
+   */
+  @Input('itBadge') color: BadgeColor | undefined;
+
+  /**
+   * Show rounded badge
+   * @default false
+   */
+  @Input({ transform: inputToBoolean }) rounded?: boolean;
+
+  @HostBinding('class')
+  protected get badgeClass(): string {
+    let badgeClass = 'badge';
+    if (this.rounded) {
+      badgeClass += ` rounded-pill`;
+    }
+    if (this.color) {
+      badgeClass += ` bg-${this.color}`;
+    }
+
+    return badgeClass;
+  }
+}

package/src/lib/components/core/button/button.directive.spec.ts

@@ -0,0 +1,96 @@
+import { ItButtonDirective } from './button.directive';
+import { Component, DebugElement } from '@angular/core';
+import { ButtonColor } from '../../../interfaces/core';
+import { FormsModule } from '@angular/forms';
+import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+
+/** Componente per testare una singola button. */
+@Component({
+  template: ` <div>
+    <button [disabled]="disabled" [itButton]="color" (click)="onClick()">
+      {{ label }}
+    </button>
+  </div>`,
+})
+class SingleButtonComponent {
+  disabled = false;
+  color: ButtonColor = 'primary';
+  count = 0;
+  label = 'Test Button';
+
+  onClick = () => {
+    this.count++;
+  };
+}
+
+describe('ItButtonDirective', () => {
+  beforeEach(fakeAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [FormsModule, ItButtonDirective],
+      declarations: [SingleButtonComponent],
+    });
+
+    TestBed.compileComponents();
+  }));
+
+  describe('comportamenti base', () => {
+    let fixture: ComponentFixture<SingleButtonComponent>;
+    let buttonDebugElement: DebugElement;
+    let buttonNativeElement: HTMLElement;
+    let buttonInstance: ItButtonDirective;
+    let testComponent: SingleButtonComponent;
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(SingleButtonComponent);
+      fixture.detectChanges();
+
+      buttonDebugElement = fixture.debugElement.query(By.directive(ItButtonDirective));
+      buttonNativeElement = buttonDebugElement.nativeElement;
+      buttonInstance = buttonDebugElement.componentInstance;
+      testComponent = fixture.debugElement.componentInstance;
+    });
+
+    it('dovrebbe poter essere abilitato e disabilitato', () => {
+      expect(buttonInstance.disabled).toBe(false);
+
+      testComponent.disabled = true;
+      fixture.detectChanges();
+
+      expect(buttonInstance.disabled).toBe(true);
+
+      testComponent.disabled = false;
+      fixture.detectChanges();
+
+      expect(buttonInstance.disabled).toBe(false);
+    });
+
+    it("dovrebbe ricevere l'evento di click", () => {
+      expect(testComponent.count).toBe(0);
+      fixture.detectChanges();
+
+      buttonNativeElement.click();
+      fixture.detectChanges();
+
+      expect(testComponent.count).toBe(1);
+
+      buttonNativeElement.click();
+      fixture.detectChanges();
+
+      expect(testComponent.count).toBe(2);
+    });
+
+    it('dovrebbe poter cambiare colore', () => {
+      expect(testComponent.color).toBe('primary');
+      expect(buttonInstance.color).toBe('primary');
+
+      testComponent.color = 'secondary';
+      fixture.detectChanges();
+      expect(buttonInstance.color).toBe('secondary');
+    });
+
+    it('dovrebbe generare un id univoco per bottone', () => {
+      expect(buttonNativeElement.textContent.trim()).toBe('Test Button');
+    });
+  });
+});