design-angular-kit 1.2.0 → 1.2.1

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

@@ -0,0 +1,80 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ItSpinnerComponent } from './spinner.component';
+import { Component, Input } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import { inputToBoolean } from '../../../utils/coercion';
+import { tb_base } from '../../../../test';
+
+@Component({
+  selector: 'it-unit-test',
+  template: ` <it-spinner [active]="active" [small]="small"></it-spinner> `,
+})
+class UnitTestComponent {
+  @Input({ transform: inputToBoolean }) set active(value: boolean | undefined) {
+    this._active = value;
+  }
+  get active(): boolean | undefined {
+    return this._active;
+  }
+  private _active: boolean | undefined = undefined;
+
+  @Input() set small(value: boolean | undefined) {
+    this._small = value;
+  }
+  get small(): boolean | undefined {
+    return this._small;
+  }
+  private _small: boolean | undefined = undefined;
+}
+
+let component: UnitTestComponent;
+let fixture: ComponentFixture<UnitTestComponent>;
+
+describe('ItSpinnerComponent', () => {
+  beforeEach(async () => {
+    TestBed.configureTestingModule({
+      declarations: [UnitTestComponent],
+      imports: [ItSpinnerComponent],
+      providers: tb_base.providers,
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(UnitTestComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('Dovrebbe avere spinner active', () => {
+    component.active = true;
+    fixture.detectChanges();
+    const spanElement = fixture.debugElement.query(By.css('div.progress-spinner.progress-spinner-active'));
+    expect(spanElement).toBeTruthy();
+  });
+
+  it('Dovrebbe avere spinner non active', () => {
+    component.active = false;
+    fixture.detectChanges();
+    const spanElement = fixture.debugElement.query(By.css('div.progress-spinner'));
+    expect(spanElement).toBeTruthy();
+  });
+
+  it('Dovrebbe avere spinner small non active', () => {
+    component.active = false;
+    component.small = true;
+    fixture.detectChanges();
+    const spanElement = fixture.debugElement.query(By.css('div.progress-spinner.size-sm'));
+    expect(spanElement).toBeTruthy();
+  });
+
+  it('Dovrebbe avere spinner small active', () => {
+    component.active = true;
+    component.small = true;
+    fixture.detectChanges();
+    const spanElement = fixture.debugElement.query(By.css('div.progress-spinner.progress-spinner-active.size-sm'));
+    expect(spanElement).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,31 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+import { TranslateModule } from '@ngx-translate/core';
+import { inputToBoolean } from '../../../utils/coercion';
+
+@Component({
+  standalone: true,
+  selector: 'it-spinner',
+  templateUrl: './spinner.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [TranslateModule],
+})
+export class ItSpinnerComponent {
+  /**
+   * The spinner is active
+   * @default true
+   */
+  @Input({ transform: inputToBoolean }) active: boolean = true;
+
+  /**
+   * Show a small spinner
+   * @default false
+   */
+  @Input({ transform: inputToBoolean }) small?: boolean;
+
+  /**
+   * Show the double animation
+   * @default false
+   */
+  @Input({ transform: inputToBoolean }) double?: boolean;
+}

package/src/lib/components/core/steppers/steppers-container/steppers-container.component.html

@@ -0,0 +1,126 @@
+<div class="steppers" [class.bg-dark]="dark">
+  @if (showHeader) {
+    <div class="steppers-header">
+      @if (steps) {
+        <ul>
+          @for (step of steps; track step.id; let i = $index) {
+            <li [class.confirmed]="i < activeStep" [class.active]="i === activeStep" [class.no-line]="i === activeStep && steppersNumber">
+              @if (step.icon && !steppersNumber) {
+                <it-icon [title]="step.iconTitle" [name]="step.icon"></it-icon>
+              }
+              @if (steppersNumber) {
+                <span class="steppers-number">
+                  @if (i < activeStep) {
+                    <ng-container *ngTemplateOutlet="checkIcon"></ng-container>
+                  } @else {
+                    <span class="visually-hidden">{{ 'it.core.step' | translate }} </span>{{ i + 1 }}
+                  }
+                </span>
+              }
+              {{ step.label }}
+              @if (i < activeStep && !steppersNumber) {
+                <ng-container *ngTemplateOutlet="checkIcon"></ng-container>
+              }
+              @if (i === activeStep) {
+                <span class="visually-hidden">{{ 'it.core.active' | translate }}</span>
+              }
+            </li>
+          }
+        </ul>
+      }
+      @if (steps) {
+        <span class="steppers-index" aria-hidden="true">
+          @if (!steppersNumber) {
+            {{ activeStep + 1 + '/' + steps.length }}
+          } @else {
+            @for (step of steps; track step.id; let i = $index) {
+              <span [class.active]="i === activeStep">{{ i + 1 }}</span>
+            }
+          }
+        </span>
+      }
+    </div>
+  }
+
+  @if (steps?.get(activeStep); as step) {
+    <div class="steppers-content" aria-live="polite">
+      <ng-container *ngTemplateOutlet="step.htmlContent"></ng-container>
+    </div>
+  }
+
+  @if (showBackButton || showSaveButton || showForwardButton || showConfirmButton || !!progressStyle) {
+    <nav class="steppers-nav">
+      @if (showBackButton) {
+        <button
+          type="button"
+          itButton="outline-primary"
+          size="sm"
+          class="steppers-btn-prev"
+          [disabled]="disableBackButton"
+          (click)="backClick.emit(activeStep)">
+          <it-icon [labelWaria]="'it.core.back' | translate" name="chevron-left" color="primary"></it-icon>
+          {{ 'it.core.back' | translate }}
+        </button>
+      }
+      @if (!!progressStyle && steps) {
+        @if (progressStyle === 'dots') {
+          <ul class="steppers-dots">
+            @for (step of steps; track step; let i = $index) {
+              <li [class.done]="i < activeStep">
+                <span class="visually-hidden">
+                  {{ 'it.core.step-of' | translate: { current: activeStep + 1, available: steps?.length } }}
+                  {{ i < activeStep ? '- ' + ('it.core.confirmed' | translate) : '' }}
+                </span>
+              </li>
+            }
+          </ul>
+        } @else {
+          <div class="steppers-progress">
+            <it-progress-bar [color]="progressColor" [value]="(activeStep / (steps?.length || 1)) * 100"></it-progress-bar>
+          </div>
+        }
+      }
+      @if (showSaveButton) {
+        <button
+          type="button"
+          itButton="primary"
+          size="sm"
+          class="steppers-btn-save"
+          [progress]="saveLoading"
+          [disabled]="saveLoading || disableSaveButton"
+          (click)="saveClick.emit(activeStep)">
+          {{ 'it.general.save' | translate }}
+        </button>
+      }
+      @if (showForwardButton) {
+        <button
+          type="button"
+          itButton="outline-primary"
+          size="sm"
+          class="steppers-btn-next"
+          [disabled]="disableForwardButton"
+          (click)="forwardClick.emit(activeStep)">
+          {{ 'it.core.forward' | translate }}
+          <it-icon [labelWaria]="'it.core.forward' | translate" name="chevron-right" color="primary"></it-icon>
+        </button>
+      }
+      @if (showConfirmButton) {
+        <button
+          type="button"
+          itButton="primary"
+          size="sm"
+          class="steppers-btn-confirm d-lg-block"
+          [progress]="confirmLoading"
+          [disabled]="confirmLoading || disableConfirmButton"
+          (click)="confirmClick.emit(activeStep)">
+          {{ 'it.core.confirm' | translate }}
+        </button>
+      }
+    </nav>
+  }
+</div>
+
+<ng-template #checkIcon>
+  <it-icon [labelWaria]="'it.core.confirmed' | translate" name="check" class="steppers-success"></it-icon>
+  <span class="visually-hidden">{{ 'it.core.confirmed' | translate }}</span>
+</ng-template>

package/src/lib/components/core/steppers/steppers-container/steppers-container.component.spec.ts

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

package/src/lib/components/core/steppers/steppers-container/steppers-container.component.ts

@@ -0,0 +1,185 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ContentChildren,
+  EventEmitter,
+  Input,
+  OnDestroy,
+  Output,
+  QueryList,
+} from '@angular/core';
+import { ItSteppersItemComponent } from '../steppers-item/steppers-item.component';
+import { ProgressBarColor } from '../../../../interfaces/core';
+import { startWith, Subscription } from 'rxjs';
+import { NgTemplateOutlet } from '@angular/common';
+import { ItIconComponent } from '../../../utils/icon/icon.component';
+import { TranslateModule } from '@ngx-translate/core';
+import { ItButtonDirective } from '../../button/button.directive';
+import { ItProgressBarComponent } from '../../progress-bar/progress-bar.component';
+import { ItProgressButtonComponent } from '../../progress-button/progress-button.component';
+import { inputToBoolean } from '../../../../utils/coercion';
+
+@Component({
+  standalone: true,
+  selector: 'it-steppers-container',
+  templateUrl: './steppers-container.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [ItIconComponent, NgTemplateOutlet, TranslateModule, ItButtonDirective, ItProgressBarComponent, ItProgressButtonComponent],
+})
+export class ItSteppersContainerComponent implements AfterViewInit, OnDestroy {
+  /**
+   * The active step index
+   * @param index the step index
+   */
+  @Input({ required: true }) activeStep!: number;
+
+  /**
+   * Show the stepper header
+   * @default true
+   */
+  @Input({ transform: inputToBoolean }) showHeader: boolean = true;
+
+  /**
+   * Dark style
+   * @default false
+   */
+  @Input({ transform: inputToBoolean }) dark?: boolean;
+
+  /**
+   * The labels present in the header steps can be anticipated by the relative ordinal number.
+   * @efualt false
+   */
+  @Input({ transform: inputToBoolean }) steppersNumber?: boolean;
+
+  /**
+   * The progress style
+   * -<b>progress</b>: Show progress bar - You can change the color with the `progressColor` attribute
+   * -<b>dots</b>: Show progress dots
+   * @default undefined - don't show progress
+   */
+  @Input() progressStyle: 'progress' | 'dots' | undefined;
+
+  /**
+   * Customize progress color
+   */
+  @Input() progressColor: ProgressBarColor | undefined;
+
+  /**
+   * Show the back button
+   * @default true
+   */
+  @Input({ transform: inputToBoolean }) showBackButton: boolean = true;
+
+  /**
+   * Disable the back button
+   * @default false
+   */
+  @Input({ transform: inputToBoolean }) disableBackButton?: boolean;
+
+  /**
+   * Show the forward button
+   * @default true
+   */
+  @Input({ transform: inputToBoolean }) showForwardButton: boolean = true;
+
+  /**
+   * Disable the forward button
+   * @default false
+   */
+  @Input({ transform: inputToBoolean }) disableForwardButton?: boolean;
+
+  /**
+   * Show the confirm button
+   * @default false
+   */
+  @Input({ transform: inputToBoolean }) showConfirmButton?: boolean;
+
+  /**
+   * Disable the confirm button
+   * @default false
+   */
+  @Input({ transform: inputToBoolean }) disableConfirmButton?: boolean;
+
+  /**
+   * Show the confirm button as indeterminate progress button
+   */
+  @Input({ transform: inputToBoolean }) confirmLoading?: boolean;
+
+  /**
+   * Show the save button
+   * @default false
+   */
+  @Input({ transform: inputToBoolean }) showSaveButton?: boolean;
+
+  /**
+   * Disable the save button
+   * @default false
+   */
+  @Input({ transform: inputToBoolean }) disableSaveButton?: boolean;
+
+  /**
+   * Show the save button as indeterminate progress button
+   */
+  @Input({ transform: inputToBoolean }) saveLoading?: boolean;
+
+  /**
+   * The stepper items
+   */
+  @ContentChildren(ItSteppersItemComponent) steps?: QueryList<ItSteppersItemComponent>;
+
+  /**
+   * On back button click
+   * @event activeStep the current step index
+   */
+  @Output() backClick: EventEmitter<number>;
+
+  /**
+   * On forward button click
+   * @event activeStep the current step index
+   */
+  @Output() forwardClick: EventEmitter<number>;
+
+  /**
+   * On confirm button click
+   * @event activeStep the current step index
+   */
+  @Output() confirmClick: EventEmitter<number>;
+
+  /**
+   * On save button click
+   * @event activeStep the current step index
+   */
+  @Output() saveClick: EventEmitter<number>;
+
+  private stepsSubscriptions?: Array<Subscription>;
+
+  constructor(private readonly _changeDetectorRef: ChangeDetectorRef) {
+    this.backClick = new EventEmitter<number>();
+    this.forwardClick = new EventEmitter<number>();
+    this.confirmClick = new EventEmitter<number>();
+    this.saveClick = new EventEmitter<number>();
+  }
+
+  ngAfterViewInit(): void {
+    this.steps?.changes
+      .pipe(
+        // When steps changes (dynamic add/remove)
+        startWith(undefined)
+      )
+      .subscribe(() => {
+        this.stepsSubscriptions?.forEach(sub => sub.unsubscribe()); // Remove old subscriptions
+        this.stepsSubscriptions = this.steps?.map(step =>
+          step.valueChanges.subscribe(() => {
+            this._changeDetectorRef.detectChanges(); // DetectChanges when step attributes changes
+          })
+        );
+        this._changeDetectorRef.detectChanges(); // Force update html render
+      });
+  }
+
+  ngOnDestroy(): void {
+    this.stepsSubscriptions?.forEach(step => step.unsubscribe());
+  }
+}

package/src/lib/components/core/steppers/steppers-item/steppers-item.component.html

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

package/src/lib/components/core/steppers/steppers-item/steppers-item.component.spec.ts

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

package/src/lib/components/core/steppers/steppers-item/steppers-item.component.ts

@@ -0,0 +1,33 @@
+import { ChangeDetectionStrategy, Component, Input, TemplateRef, ViewChild } from '@angular/core';
+import { IconName } from '../../../../interfaces/icon';
+import { ItAbstractComponent } from '../../../../abstracts/abstract.component';
+
+@Component({
+  standalone: true,
+  selector: 'it-steppers-item',
+  templateUrl: './steppers-item.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [],
+})
+export class ItSteppersItemComponent extends ItAbstractComponent {
+  /**
+   * The labels present in the header steps
+   */
+  @Input({ required: true }) label!: string;
+
+  /**
+   * The labels present in the header steps can be preceded by an icon.
+   */
+  @Input() icon: IconName | undefined;
+
+  /**
+   * The title for the icon.
+   */
+  @Input() iconTitle: string | undefined;
+
+  /**
+   * The content of step
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  @ViewChild(TemplateRef) public htmlContent!: TemplateRef<any>;
+}

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

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { ItSteppersContainerComponent } from './steppers-container/steppers-container.component';
+import { ItSteppersItemComponent } from './steppers-item/steppers-item.component';
+
+const steppersComponents = [ItSteppersContainerComponent, ItSteppersItemComponent];
+
+@NgModule({
+  imports: steppersComponents,
+  exports: steppersComponents,
+})
+export class ItSteppersModule {}

package/src/lib/components/core/tab/tab-container/tab-container.component.html

@@ -0,0 +1,78 @@
+<div
+  [class.row]="vertical"
+  [class.flex-row-reverse]="inverted && vertical"
+  [class.d-flex]="inverted && !vertical"
+  [class.flex-column-reverse]="inverted && !vertical">
+  <div
+    [class.col-5]="inverted && vertical"
+    [class.col-md-4]="inverted && vertical"
+    [class.col-lg-3]="inverted && vertical"
+    [class.col-4]="!inverted && vertical"
+    [class.col-md-3]="!inverted && vertical">
+    @if (tabs) {
+      <ul
+        class="nav nav-tabs"
+        [class.nav-tabs-editable]="editable"
+        [class.nav-tabs-cards]="cards"
+        [class.nav-tabs-vertical]="vertical"
+        [class.auto]="auto"
+        [class.nav-tabs-icon-text]="iconText"
+        [class.nav-dark]="dark"
+        role="tablist">
+        @for (tab of tabs; track tab.id; let i = $index) {
+          <li class="nav-item">
+            <a
+              #tabNavLinks
+              [id]="tab.id + '-tab-link'"
+              role="tab"
+              class="nav-link"
+              [class.active]="tab.active"
+              [class.disabled]="tab.disabled"
+              [attr.href]="'#' + tab.id + '-tab'"
+              [attr.aria-controls]="tab.id + '-tab'"
+              (click)="onTab(tab)">
+              @if (tab.icon) {
+                <it-icon [name]="tab.icon" class="me-2"></it-icon>
+              }
+              {{ tab.label }}
+            </a>
+            @if (editable) {
+              <a class="nav-link-close" (click)="clickToClose(i)" (keypress)="clickToClose(i)" [attr.disabled]="tab.disabled">
+                <it-icon name="close"></it-icon>
+              </a>
+            }
+          </li>
+        }
+        @if (editable) {
+          <li class="nav-item">
+            <a href="#" class="nav-tab-add" (click)="clickToAdd($event)" (keypress)="clickToAdd($event)"
+              ><span class="visually-hidden"> Aggiungi un tab</span></a
+            >
+          </li>
+        }
+      </ul>
+    }
+  </div>
+  <div
+    [class.col-7]="inverted && vertical"
+    [class.col-md-8]="inverted && vertical"
+    [class.col-lg-9]="inverted && vertical"
+    [class.col-8]="!inverted && vertical"
+    [class.col-md-9]="!inverted && vertical">
+    @if (tabs) {
+      <div class="tab-content">
+        @for (tab of tabs; track tab.id) {
+          <div
+            [id]="tab.id + '-tab'"
+            class="tab-pane p-4 fade {{ tab.class ?? '' }}"
+            [class.active]="tab.active"
+            [class.show]="tab.active"
+            role="tabpanel"
+            [attr.aria-labelledby]="tab.id + '-tab-link'">
+            <ng-container *ngTemplateOutlet="tab.htmlContent"></ng-container>
+          </div>
+        }
+      </div>
+    }
+  </div>
+</div>

package/src/lib/components/core/tab/tab-container/tab-container.component.spec.ts

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