design-angular-kit 1.2.1 → 1.2.2

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

@@ -1,21 +0,0 @@
-import { ElementRef } from '@angular/core';
-import { TestBed } from '@angular/core/testing';
-
-import { ItPopoverDirective } from './popover.directive';
-
-export class MockElementRef extends ElementRef {
-  nativeElement = {};
-}
-
-describe('ItPopoverDirective', () => {
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      providers: [{ provide: ElementRef, useClass: MockElementRef }],
-    }).compileComponents();
-  });
-
-  it('should create an instance', () => {
-    const directive = new ItPopoverDirective(TestBed.inject(ElementRef));
-    expect(directive).toBeTruthy();
-  });
-});

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

@@ -1,171 +0,0 @@
-import { AfterViewInit, Directive, ElementRef, EventEmitter, Input, OnDestroy, Output } from '@angular/core';
-import { ElementPlacement } from '../../../interfaces/core';
-import { Popover } from 'bootstrap-italia';
-import { inputToBoolean } from '../../../utils/coercion';
-
-@Directive({
-  standalone: true,
-  selector: '[itPopover]',
-  exportAs: 'itPopover',
-})
-export class ItPopoverDirective implements AfterViewInit, OnDestroy {
-  /**
-   * Define the popover content
-   * @param content the popover content
-   */
-  @Input('itPopover') set content(content: string) {
-    this.element.setAttribute('data-bs-content', content);
-  }
-
-  /**
-   * Define the popover title
-   * @param title the popover title
-   */
-  @Input() set popoverTitle(title: string | undefined) {
-    if (title) {
-      this.element.setAttribute('title', title);
-      this.element.setAttribute('data-bs-original-title', title);
-    }
-  }
-
-  /**
-   * Define the popover placement
-   * @param placement
-   */
-  @Input() set popoverPlacement(placement: ElementPlacement) {
-    this.element.setAttribute('data-bs-placement', placement);
-  }
-
-  /**
-   * Appends the popover to a specific element.
-   * @param container
-   */
-  @Input() set popoverContainer(container: 'body' | string | undefined) {
-    if (container) {
-      this.element.setAttribute('data-bs-container', container);
-    }
-  }
-
-  /**
-   * Indicates whether the title contains html
-   * @param html true if contain html
-   */
-  @Input({ transform: inputToBoolean }) set popoverHtml(html: boolean) {
-    this.element.setAttribute('data-bs-html', html ? 'true' : 'false');
-  }
-
-  /**
-   * How popover is triggered
-   * - 'hover': To open the Popover on hover of the mouse over the element
-   * - 'focus': To ignore popovers on the user's next click of an element other than the toggle element.
-   * @param trigger
-   */
-  @Input() set popoverTrigger(trigger: 'click' | 'hover' | 'focus' | 'manual' | undefined) {
-    if (trigger) {
-      this.element.setAttribute('data-bs-trigger', trigger);
-    }
-  }
-
-  /**
-   * This event fires immediately when the show method is called.
-   */
-  @Output() showEvent: EventEmitter<Event> = new EventEmitter();
-
-  /**
-   * This event is triggered when the tooltip has been made visible to the user (it will wait for the CSS transitions to complete).
-   */
-  @Output() shownEvent: EventEmitter<Event> = new EventEmitter();
-
-  /**
-   * This event fires immediately when the hide method is called.
-   */
-  @Output() hideEvent: EventEmitter<Event> = new EventEmitter();
-
-  /**
-   * This event is raised when the tooltip has finished being hidden from the user (it will wait for the CSS transitions to complete).
-   */
-  @Output() hiddenEvent: EventEmitter<Event> = new EventEmitter();
-
-  /**
-   * This event fires after the show event when the tooltip template has been added to the DOM.
-   */
-  @Output() insertedEvent: EventEmitter<Event> = new EventEmitter();
-
-  private readonly element: HTMLElement;
-  private popover?: Popover;
-
-  constructor(private readonly _elementRef: ElementRef) {
-    this.element = this._elementRef.nativeElement;
-  }
-
-  ngAfterViewInit(): void {
-    this.element.setAttribute('data-bs-toggle', 'popover');
-    this.popover = Popover.getOrCreateInstance(this.element);
-
-    this.element.addEventListener('show.bs.popover', event => this.showEvent.emit(event));
-    this.element.addEventListener('shown.bs.popover', event => this.shownEvent.emit(event));
-    this.element.addEventListener('hide.bs.popover', event => this.hideEvent.emit(event));
-    this.element.addEventListener('hidden.bs.popover', event => this.hiddenEvent.emit(event));
-    this.element.addEventListener('inserted.bs.popover', event => this.insertedEvent.emit(event));
-  }
-
-  ngOnDestroy(): void {
-    this.dispose();
-  }
-
-  /**
-   * Shows the popover of an item.
-   */
-  public show(): void {
-    this.popover?.show();
-  }
-
-  /**
-   * Hide the popover of an element.
-   */
-  public hide(): void {
-    this.popover?.hide();
-  }
-
-  /**
-   * Activate / Deactivate the popover of an element
-   */
-  public toggle(): void {
-    this.popover?.toggle();
-  }
-
-  /**
-   * Hides and destroys the popover of an element.
-   */
-  public dispose(): void {
-    this.popover?.dispose();
-  }
-
-  /**
-   * Gives the popover of an element a chance to be shown.
-   */
-  public enable(): void {
-    this.popover?.enable();
-  }
-
-  /**
-   * Removes the ability to show the popover of an element.
-   */
-  public disable(): void {
-    this.popover?.disable();
-  }
-
-  /**
-   * Toggles the possibility that the popover of an element is shown or hidden.
-   */
-  public toggleEnabled(): void {
-    this.popover?.disable();
-  }
-
-  /**
-   * Updates the position of an element's popover.
-   */
-  public update(): void {
-    this.popover?.disable();
-  }
-}

package/src/lib/components/core/progress-bar/progress-bar.component.html

@@ -1,20 +0,0 @@
-<div class="progress-bar-wrapper">
-  @if (showLabel) {
-    <div class="progress-bar-label">
-      <span class="visually-hidden">{{ 'it.core.progress' | translate }} </span>{{ value }}%
-    </div>
-  }
-  <div class="progress" [class.progress-color]="!!color" [class.progress-indeterminate]="indeterminate">
-    @if (indeterminate) {
-      <div class="progress-bar{{ bgColor }}" role="progressbar"></div>
-    } @else {
-      <div
-        class="progress-bar{{ bgColor }}"
-        role="progressbar"
-        [style.width.%]="value"
-        [attr.aria-valuenow]="value"
-        aria-valuemin="0"
-        aria-valuemax="100"></div>
-    }
-  </div>
-</div>

package/src/lib/components/core/progress-bar/progress-bar.component.spec.ts

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

package/src/lib/components/core/progress-bar/progress-bar.component.ts

@@ -1,46 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-import { ProgressBarColor } from '../../../interfaces/core';
-import { TranslateModule } from '@ngx-translate/core';
-import { inputToBoolean } from '../../../utils/coercion';
-
-@Component({
-  standalone: true,
-  selector: 'it-progress-bar',
-  templateUrl: './progress-bar.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [TranslateModule],
-})
-export class ItProgressBarComponent {
-  /**
-   * The progress bar value [0, 100]
-   */
-  @Input({ required: true }) value!: number;
-
-  /**
-   * Show the progress label
-   * @default false
-   */
-  @Input({ transform: inputToBoolean }) showLabel?: boolean;
-
-  /**
-   * Show the progress as indeterminate
-   * @default false
-   */
-  @Input({ transform: inputToBoolean }) indeterminate?: boolean;
-
-  /**
-   * The progress bar color
-   */
-  @Input() color: ProgressBarColor | undefined;
-
-  /**
-   * Return the background color
-   */
-  get bgColor(): string {
-    if (!this.color) {
-      return '';
-    }
-
-    return ` bg-${this.color}`;
-  }
-}

package/src/lib/components/core/progress-button/progress-button.component.html

@@ -1,5 +0,0 @@
-<ng-content></ng-content>
-
-@if (isProgress) {
-  <it-progress-bar [value]="progressValue" [indeterminate]="isIndeterminate" [color]="progressColor"></it-progress-bar>
-}

package/src/lib/components/core/progress-button/progress-button.component.spec.ts

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

package/src/lib/components/core/progress-button/progress-button.component.ts

@@ -1,39 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-import { ProgressBarColor } from '../../../interfaces/core';
-import { ItProgressBarComponent } from '../progress-bar/progress-bar.component';
-
-@Component({
-  standalone: true,
-  // eslint-disable-next-line @angular-eslint/component-selector
-  selector: 'button[itButton][progress]',
-  templateUrl: './progress-button.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [ItProgressBarComponent],
-})
-export class ItProgressButtonComponent {
-  /**
-   * Behavior of the progress bar
-   * - <b>true</b>: Show indeterminate progress bar
-   * - <b>false</b> or <b>undefined</b>: Hide progress bar
-   * - <b>number</b> [0, 100]: Assign a specific value to the progress bar
-   * @default undefined
-   */
-  @Input() progress: number | boolean | undefined;
-
-  /**
-   * The progress bar color
-   */
-  @Input() progressColor: ProgressBarColor | undefined;
-
-  get isProgress(): boolean {
-    return typeof this.progress === 'number' || !!this.progress;
-  }
-
-  get progressValue(): number {
-    return typeof this.progress === 'number' ? this.progress : 0;
-  }
-
-  get isIndeterminate(): boolean {
-    return typeof this.progress !== 'number' && !!this.progress;
-  }
-}

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

@@ -1,7 +0,0 @@
-<div class="progress-spinner" [class.progress-spinner-double]="double" [class.progress-spinner-active]="active" [class.size-sm]="small">
-  @if (double) {
-    <div class="progress-spinner-inner"></div>
-    <div class="progress-spinner-inner"></div>
-  }
-  <span class="visually-hidden">{{ 'it.core.loading' | translate }}...</span>
-</div>

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

@@ -1,80 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

@@ -1,126 +0,0 @@
-<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

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