Merge remote-tracking branch 'origin/main' into feat/stable

.github/workflows/run-tests.yml

@@ -20,6 +20,7 @@ jobs:
         with:
           node-version: '20.x'
       - run: npm ci
+      - run: npm run lint
       - run: npm run build
       - run: npm run build:lib
       - run: npm run test

projects/design-angular-kit/src/lib/abstracts/abstract-form.component.ts

@@ -18,7 +18,7 @@ export abstract class ItAbstractFormComponent<T = any> extends ItAbstractCompone
    * - <b>false</b>: Never show validation color
    * - <b>only-valid</b>: Show only valid validation color
    * - <b>only-invalid</b>: Show only invalid validation color
-   * @default <b>only-invalid</b>: Show only invalid validation color
+   * @default <b>true</b>: Always show the validation color
    */
   @Input() validationMode: boolean | 'only-valid' | 'only-invalid' = true;
 

projects/design-angular-kit/src/lib/abstracts/abstract.component.ts

@@ -9,12 +9,11 @@ import {
   OnChanges,
   Output,
   Renderer2,
-  SimpleChanges
+  SimpleChanges,
 } from '@angular/core';
 
 @Component({ template: '' })
 export abstract class ItAbstractComponent implements AfterViewInit, OnChanges {
-
   /**
    * The element ID
    */
@@ -31,7 +30,6 @@ export abstract class ItAbstractComponent implements AfterViewInit, OnChanges {
    */
   private static instances = 0;
 
-
   protected readonly _renderer: Renderer2; // Injected
   protected readonly _elementRef: ElementRef; // Injected
   protected readonly _changeDetectorRef: ChangeDetectorRef; // Injected
@@ -48,6 +46,7 @@ export abstract class ItAbstractComponent implements AfterViewInit, OnChanges {
     this._renderer.removeAttribute(this._elementRef.nativeElement, 'id');
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   ngOnChanges(changes: SimpleChanges): void {
     this.valueChanges.next(); // The inputs were changed
   }

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

@@ -1,7 +1,6 @@
 <div class="accordion">
   <div class="accordion-item">
-
-    <h2 class="accordion-header" id="collapse-{{id}}-heading">
+    <h2 class="accordion-header" id="collapse-{{ id }}-heading">
       <button
         class="accordion-button"
         type="button"
@@ -10,18 +9,19 @@ <h2 class="accordion-header" id="collapse-{{id}}-heading">
         [attr.data-bs-target]="'#collapse-' + id"
         [attr.aria-controls]="'collapse-' + id"
         [attr.aria-expanded]="opened ? 'true' : 'false'">
-        {{title}}
+        {{ title }}
       </button>
     </h2>
 
-    <div #collapse id="collapse-{{id}}" role="region"
-         class="accordion-collapse collapse {{class}}"
-         [attr.aria-labelledby]="'collapse-' + id + '-heading'">
-
+    <div
+      #collapse
+      id="collapse-{{ id }}"
+      role="region"
+      class="accordion-collapse collapse {{ class }}"
+      [attr.aria-labelledby]="'collapse-' + id + '-heading'">
       <div class="accordion-body">
         <ng-content></ng-content>
       </div>
     </div>
   </div>
 </div>
-

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

@@ -8,8 +8,7 @@ describe('ItAccordionComponent', () => {
   let fixture: ComponentFixture<ItAccordionComponent>;
 
   beforeEach(async () => {
-    await TestBed.configureTestingModule(tb_base)
-      .compileComponents();
+    await TestBed.configureTestingModule(tb_base).compileComponents();
 
     fixture = TestBed.createComponent(ItAccordionComponent);
     component = fixture.componentInstance;

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

@@ -5,32 +5,32 @@ 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>
-    `
-  }
-)
+@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; }
+  @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; }
+  @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],
@@ -59,5 +59,4 @@ describe('ItAlertComponent', () => {
     const spanElement = fixture.debugElement.query(By.css('div.alert.alert-success'));
     expect(spanElement).toBeTruthy();
   });
-
 });

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

@@ -8,8 +8,7 @@ describe('ItAvatarDropdownComponent', () => {
   let fixture: ComponentFixture<ItAvatarDropdownComponent>;
 
   beforeEach(async () => {
-    await TestBed.configureTestingModule(tb_base)
-      .compileComponents();
+    await TestBed.configureTestingModule(tb_base).compileComponents();
 
     fixture = TestBed.createComponent(ItAvatarDropdownComponent);
     component = fixture.componentInstance;

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

@@ -8,8 +8,7 @@ describe('ItAvatarGroupComponent', () => {
   let fixture: ComponentFixture<ItAvatarGroupComponent>;
 
   beforeEach(async () => {
-    await TestBed.configureTestingModule(tb_base)
-      .compileComponents();
+    await TestBed.configureTestingModule(tb_base).compileComponents();
 
     fixture = TestBed.createComponent(ItAvatarGroupComponent);
     component = fixture.componentInstance;
@@ -21,14 +20,12 @@ describe('ItAvatarGroupComponent', () => {
   });
 });
 
-
 describe('ItAvatarGroupItemComponent', () => {
   let component: ItAvatarGroupItemComponent;
   let fixture: ComponentFixture<ItAvatarGroupItemComponent>;
 
   beforeEach(async () => {
-    await TestBed.configureTestingModule(tb_base)
-      .compileComponents();
+    await TestBed.configureTestingModule(tb_base).compileComponents();
 
     fixture = TestBed.createComponent(ItAvatarGroupItemComponent);
     component = fixture.componentInstance;

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

@@ -1,11 +1,11 @@
 import { ColorsEnum } from '../../../enums/colors.enums';
 import { SizesEnum } from '../../../enums/sizes.enum';
-import { Directive, HostBinding, Input } from "@angular/core";
+import { Directive, HostBinding, Input } from '@angular/core';
 
 @Directive({
   standalone: true,
   selector: '[itAvatar]',
-  exportAs: 'itAvatar'
+  exportAs: 'itAvatar',
 })
 export class ItAvatarDirective {
   /**
@@ -20,13 +20,13 @@ export class ItAvatarDirective {
    */
   @Input()
   get color(): string | undefined {
-    return this._color
+    return this._color;
   }
   set color(value: string | undefined) {
     const colorsKey = value as keyof typeof ColorsEnum;
-    if (ColorsEnum[colorsKey]){
-      this._color = ColorsEnum[colorsKey] 
-    }else{
+    if (ColorsEnum[colorsKey]) {
+      this._color = ColorsEnum[colorsKey];
+    } else {
       this._color = undefined;
     }
   }
@@ -43,34 +43,31 @@ export class ItAvatarDirective {
    */
   @Input()
   get size(): SizesEnum | undefined {
-    return this._size
+    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
+    } else {
+      this._size = undefined;
     }
   }
 
   private _size?: SizesEnum;
 
   @HostBinding('class')
   get hostClasses(): string {
-    let cssClass = 'avatar'
+    let cssClass = 'avatar';
 
     if (this.size) {
-      cssClass += ` ${this.size}`
+      cssClass += ` ${this.size}`;
     }
 
     if (this.color) {
-      cssClass += ` avatar-${this.color}`
+      cssClass += ` avatar-${this.color}`;
     }
 
-    return cssClass
+    return cssClass;
   }
-
-
 }

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

@@ -4,32 +4,39 @@ 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>
-    `
-  }
-)
+@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;}
+  @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;}
+  @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]
+      imports: [ItBadgeDirective],
     }).compileComponents();
 
     fixture = TestBed.createComponent(UnitTestComponent);

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

@@ -9,10 +9,9 @@ import { inputToBoolean } from '../../../utils/coercion';
 @Directive({
   standalone: true,
   selector: '[itBadge]',
-  exportAs: 'itBadge'
+  exportAs: 'itBadge',
 })
 export class ItBadgeDirective {
-
   /**
    * Define the badge color
    * @default undefined
@@ -23,7 +22,7 @@ export class ItBadgeDirective {
    * Show rounded badge
    * @default false
    */
-  @Input({transform: inputToBoolean}) rounded?: boolean;
+  @Input({ transform: inputToBoolean }) rounded?: boolean;
 
   @HostBinding('class')
   protected get badgeClass(): string {
@@ -37,5 +36,4 @@ export class ItBadgeDirective {
 
     return badgeClass;
   }
-
 }