design-angular-kit 1.2.1 → 1.2.2

package/src/lib/components/form/transfer/transfer-list/transfer-list.component.ts

@@ -1,93 +0,0 @@
-import { AsyncPipe, TitleCasePipe } from '@angular/common';
-import { ChangeDetectionStrategy, Component, ElementRef, HostAttributeToken, inject, ViewChild } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { combineLatest, distinctUntilChanged, map, shareReplay, skip, startWith, tap } from 'rxjs';
-import { ItAbstractComponent } from '../../../../abstracts/abstract.component';
-import { TransferStore } from '../store/transfer.store';
-import { TranslateModule } from '@ngx-translate/core';
-import { SourceType, TransferItem } from '../transfer.model';
-
-interface SelectableTransferItem<T> extends TransferItem<T> {
-  selected: boolean;
-}
-
-@Component({
-  selector: 'it-transfer-list',
-  standalone: true,
-  imports: [TranslateModule, AsyncPipe, TitleCasePipe],
-  templateUrl: './transfer-list.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ItTransferListComponent<T> extends ItAbstractComponent {
-  /**
-   * Widget title
-   */
-  readonly title = inject(new HostAttributeToken('title'), { optional: true });
-
-  readonly sourceType = inject(new HostAttributeToken('sourceType'), { optional: true }) as SourceType;
-
-  private readonly items = this.store.selectItems(this.sourceType).pipe(distinctUntilChanged(), shareReplay());
-  private readonly selected = this.store.selectSelectedItems(this.sourceType).pipe(distinctUntilChanged(), shareReplay());
-
-  readonly numberOfItems$ = this.items.pipe(
-    map(items => ({ length: items.length })),
-    startWith({ length: 0 })
-  );
-  readonly selectAllDisabled = this.items.pipe(map(items => items.length === 0));
-  /**
-   * Items of the list
-   * @default []
-   */
-  readonly items$ = combineLatest([this.items, this.selected]).pipe(
-    map(([items, selected]) =>
-      items.map(item => {
-        (item as SelectableTransferItem<T>).selected = selected.has(item);
-        return item as SelectableTransferItem<T>;
-      })
-    )
-  );
-
-  @ViewChild('selectAllCheckbox')
-  selectAllCheckboxRef!: ElementRef<HTMLInputElement>;
-
-  readonly instanceId = this.getInstanceId();
-
-  constructor(private readonly store: TransferStore<T>) {
-    super();
-    this.onItemsUpdate();
-  }
-  /**
-   * Checkbox selection click handler
-   */
-  checkboxSelectionHandler(item: TransferItem<T>) {
-    this.store.checkboxSelection(item, this.sourceType);
-  }
-  /**
-   * Checkbox select all selection handler
-   */
-  checkboxSelectAllHandler(event: Event) {
-    const checked = ((event as PointerEvent).target as HTMLInputElement).checked;
-    this.store.selectAllSelection(checked, this.sourceType);
-  }
-
-  /**
-   * Items update subscription
-   */
-  private onItemsUpdate() {
-    this.items
-      .pipe(
-        takeUntilDestroyed(),
-        skip(1),
-        tap(() => {
-          if (this.selectAllCheckboxRef) {
-            this.selectAllCheckboxRef.nativeElement.checked = false;
-          }
-        })
-      )
-      .subscribe();
-  }
-
-  private getInstanceId() {
-    return Math.floor(Math.random() * 100000000).toString();
-  }
-}

package/src/lib/components/form/transfer/transfer.component.html

@@ -1,52 +0,0 @@
-<div>
-  @if (label) {
-    <label [for]="id" [class.active]="!!control.value">{{ label }}</label>
-  }
-  <div class="row">
-    <div class="col-xs-12 col-md-5">
-      <it-transfer-list sourceType="source" [title]="'it.transfer.source' | translate"></it-transfer-list>
-    </div>
-    <!-- col -->
-    <div class="col-xs-12 col-md-2">
-      <!-- transfer buttons-->
-      <div class="it-transfer-buttons">
-        <a
-          class="transfer"
-          role="button"
-          href="#"
-          [ngClass]="{ active: transferEnabled | async }"
-          (click)="transferClickHandler($event)"
-          (keypress)="transferKeyPressHandler($event)"
-          [attr.aria-label]="'it.transfer.aria-label-move-forward' | translate">
-          <it-icon name="arrow-right"></it-icon>
-        </a>
-        <span class="visually-hidden">{{ 'it.transfer.label-move-forward' | translate }}</span>
-        <a
-          class="backtransfer"
-          role="button"
-          href="#"
-          [ngClass]="{ active: backtransferEnabled | async }"
-          (click)="backtransferClickHandler($event)"
-          (keypress)="backtransferKeyPressHandler($event)"
-          [attr.aria-label]="'it.transfer.aria-label-move-backward' | translate">
-          <it-icon name="arrow-left"></it-icon>
-        </a>
-        <span class="visually-hidden">{{ 'it.transfer.label-move-backward' | translate }}</span>
-        <a
-          class="reset"
-          role="button"
-          href="#"
-          [ngClass]="{ active: resetEnabled | async }"
-          (click)="resetClickHandler($event)"
-          (keypress)="resetKeyPressHandler($event)"
-          [attr.aria-label]="'it.transfer.aria-label-reset' | translate">
-          <it-icon name="restore"></it-icon>
-        </a>
-        <span class="visually-hidden">{{ 'it.transfer.label-reset' | translate }}</span>
-      </div>
-    </div>
-    <div class="col-xs-12 col-md-5">
-      <it-transfer-list sourceType="target" [title]="'it.transfer.target' | translate"></it-transfer-list>
-    </div>
-  </div>
-</div>

package/src/lib/components/form/transfer/transfer.component.spec.ts

@@ -1,27 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { tb_base } from 'projects/design-angular-kit/src/test';
-import { TransferStore } from './store/transfer.store';
-import { ItTransferComponent } from './transfer.component';
-
-describe('ItTransferComponent', () => {
-  let component: ItTransferComponent;
-  let fixture: ComponentFixture<ItTransferComponent>;
-
-  beforeEach(async () => {
-    const { imports, providers } = tb_base;
-
-    await TestBed.configureTestingModule({
-      imports,
-      providers: [...providers, TransferStore],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(ItTransferComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/components/form/transfer/transfer.component.ts

@@ -1,159 +0,0 @@
-import { AsyncPipe, NgClass } from '@angular/common';
-import { ChangeDetectionStrategy, Component, DestroyRef, EventEmitter, inject, Input, OnInit, Optional, Output, Self } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { FormControlName, NgControl, NgModel, ReactiveFormsModule } from '@angular/forms';
-import { TranslateService } from '@ngx-translate/core';
-import { tap } from 'rxjs';
-import { ItAbstractFormComponent } from '../../../abstracts/abstract-form.component';
-import { TransferStore } from './store/transfer.store';
-import { ItTransferListComponent } from './transfer-list/transfer-list.component';
-import { TransferItem } from './transfer.model';
-import { TranslateModule } from '@ngx-translate/core';
-import { ItIconComponent } from '../../utils/icon/icon.component';
-
-/**
- * Transfer
- * @description Component that allows the creation of checkbox lists.
- */
-@Component({
-  selector: 'it-transfer',
-  standalone: true,
-  templateUrl: './transfer.component.html',
-  imports: [TranslateModule, ItIconComponent, ItTransferListComponent, NgClass, AsyncPipe, ReactiveFormsModule],
-  providers: [TransferStore],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ItTransferComponent<T = any> extends ItAbstractFormComponent<T> implements OnInit {
-  /**
-   * The select options (left side)
-   */
-  @Input() options = [];
-  /**
-   * The selected options (right side)
-   */
-  @Input() selected = [];
-  /**
-   * Fired when there is a transfer, a backtransfer or a reset event
-   */
-  @Output() readonly transferChanges = new EventEmitter<TransferItem<T>[]>();
-
-  /**
-   * Enable transfer button
-   * @default false
-   */
-  readonly transferEnabled = this.store.transferEnabled;
-  /**
-   * Enable backtransfer button
-   * @default false
-   */
-  readonly backtransferEnabled = this.store.backtransferEnabled;
-  /**
-   * Enable reset button
-   * @default false
-   */
-  readonly resetEnabled = this.store.resetEnabled;
-
-  private readonly destroyRef = inject(DestroyRef);
-
-  constructor(
-    @Self()
-    @Optional()
-    override readonly _ngControl: NgControl,
-    override readonly _translateService: TranslateService,
-    private readonly store: TransferStore<T>
-  ) {
-    super(_translateService, _ngControl);
-  }
-
-  override ngOnInit() {
-    super.ngOnInit();
-    this.storeInit();
-    this.onStoreValueChanged();
-  }
-
-  /**
-   * Transfer button click handler
-   */
-  transferClickHandler(event: MouseEvent) {
-    this.buttonEventHandler(event, () => this.store.transfer());
-  }
-  /**
-   * Transfer button keypress handler
-   */
-  transferKeyPressHandler(event: KeyboardEvent) {
-    this.buttonEventHandler(event, () => this.store.transfer());
-  }
-  /**
-   * Backtransfer button click handler
-   */
-  backtransferClickHandler(event: MouseEvent) {
-    this.buttonEventHandler(event, () => this.store.backtransfer());
-  }
-  /**
-   * Backtransfer button keypress handler
-   */
-  backtransferKeyPressHandler(event: KeyboardEvent) {
-    this.buttonEventHandler(event, () => this.store.backtransfer());
-  }
-  /**
-   * Reset button click handler
-   */
-  resetClickHandler(event: MouseEvent) {
-    this.buttonEventHandler(event, () => this.store.reset());
-  }
-  /**
-   * Reset button keypress handler
-   */
-  resetKeyPressHandler(event: KeyboardEvent) {
-    this.buttonEventHandler(event, () => this.store.reset());
-  }
-
-  private buttonEventHandler(event: Event, updateStoreCb: () => void) {
-    event.preventDefault();
-    updateStoreCb();
-  }
-
-  private storeInit() {
-    let target = [];
-    const ngControl = this._ngControl;
-    const isNgControlDefined = Boolean(this._ngControl);
-
-    // if ngControl is defined, take values from it. Input() target will be ignored
-    if (isNgControlDefined) {
-      console.debug('ngControl instanceof NgModel:', ngControl instanceof NgModel);
-      console.debug('ngControl instanceof FormControlName:', ngControl instanceof FormControlName);
-
-      // if ngControl is an ngModel (template-driven form use case), take values from it
-      if (ngControl instanceof NgModel) {
-        console.debug('ngControl instanceof NgModel');
-        const model = (ngControl as NgModel).model;
-        target = Array.isArray(model) ? model : [];
-      }
-
-      // if ngControl is an FormControlName (reactive form use case), take values from it
-      if (ngControl instanceof FormControlName) {
-        console.debug('ngControl instanceof FormControlName');
-        const model = (ngControl as FormControlName).control.value;
-        target = Array.isArray(model) ? model : [];
-      }
-
-      console.debug('ngControl is defined. Input() target will be ignored');
-    } else if (this.selected && Array.isArray(this.selected)) {
-      target = [...this.selected];
-    }
-
-    console.debug('target:', this.selected, 'formControl:', this.control.value, 'ngModel:', this._ngControl);
-    this.store.init({ source: [...this.options], target });
-  }
-
-  private onStoreValueChanged() {
-    this.store.valueChanged
-      .pipe(
-        takeUntilDestroyed(this.destroyRef),
-        tap(value => this.writeValue(value as T)),
-        tap(value => this.onChange(value as T)),
-        tap(value => this.transferChanges.emit(value))
-      )
-      .subscribe();
-  }
-}

package/src/lib/components/form/upload-drag-drop/upload-drag-drop.component.html

@@ -1,36 +0,0 @@
-<div class="upload-dragdrop" [class.dragover]="isDragover" [class.loading]="isLoading" [class.success]="isSuccess">
-  <div class="upload-dragdrop-image">
-    <img
-      [ngSrc]="assetBasePath + '/dist/assets/upload-drag-drop-icon.svg'"
-      alt="drag-drop-icon"
-      aria-hidden="true"
-      [width]="180"
-      [height]="180" />
-    <div class="upload-dragdrop-loading">
-      <div class="progress-donut" #donutElement></div>
-    </div>
-    <div class="upload-dragdrop-success">
-      <it-icon name="check"></it-icon>
-    </div>
-  </div>
-  <div class="upload-dragdrop-text">
-    <p class="upload-dragdrop-weight">
-      <it-icon name="file" size="xs"></it-icon>
-      {{ extension }} ({{ fileSize }})
-    </p>
-    <h5>{{ filename || ('it.form.upload-drag-file' | translate) }}</h5>
-    @if (isLoading) {
-      <p>{{ 'it.form.upload-loading' | translate }}</p>
-    }
-    @if (isSuccess) {
-      <p>{{ 'it.form.upload-complete' | translate }}</p>
-    }
-    @if (!isLoading && !isSuccess) {
-      <p>
-        {{ 'it.form.upload-or' | translate }}
-        <input type="file" [id]="id" class="upload-dragdrop-input" [accept]="accept" (change)="onLoadFile($event)" />
-        <label [for]="id">{{ 'it.form.upload-select-device' | translate }}</label>
-      </p>
-    }
-  </div>
-</div>

package/src/lib/components/form/upload-drag-drop/upload-drag-drop.component.spec.ts

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

package/src/lib/components/form/upload-drag-drop/upload-drag-drop.component.ts

@@ -1,170 +0,0 @@
-import {
-  AfterViewInit,
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  EventEmitter,
-  HostListener,
-  inject,
-  Input,
-  Output,
-  ViewChild,
-} from '@angular/core';
-import { ItAbstractComponent } from '../../../abstracts/abstract.component';
-import { ItFileUtils } from '../../../utils/file-utils';
-import { ProgressDonut } from 'bootstrap-italia';
-import { ItIconComponent } from '../../utils/icon/icon.component';
-import { NgOptimizedImage } from '@angular/common';
-import { TranslateModule } from '@ngx-translate/core';
-import { IT_ASSET_BASE_PATH } from '../../../interfaces/design-angular-kit-config';
-
-@Component({
-  standalone: true,
-  selector: 'it-upload-drag-drop',
-  templateUrl: './upload-drag-drop.component.html',
-  exportAs: 'itUploadDragDrop',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [ItIconComponent, TranslateModule, NgOptimizedImage],
-})
-export class ItUploadDragDropComponent extends ItAbstractComponent implements AfterViewInit {
-  /**
-   * The accepted file type to upload <br>
-   * Possible values: <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types">MIME Types</a> separated by comma
-   * @example application/pdf,image/png
-   * @default *
-   */
-  @Input() accept: string = '*';
-
-  /**
-   * Fired when file start to upload
-   */
-  @Output() fileStartUpload = new EventEmitter<File>();
-
-  protected isDragover: boolean = false;
-  protected isLoading: boolean = false;
-  protected isSuccess: boolean = false;
-
-  protected donut?: ProgressDonut;
-
-  @ViewChild('donutElement') private donutElement?: ElementRef<HTMLDivElement>;
-
-  protected filename?: string;
-  protected extension?: string;
-  protected fileSize?: string;
-
-  /**
-   * The bootstrap-italia asset folder path
-   * @default ./bootstrap-italia
-   */
-  protected assetBasePath: string;
-
-  constructor() {
-    super();
-    this.assetBasePath = inject(IT_ASSET_BASE_PATH);
-  }
-
-  override ngAfterViewInit(): void {
-    super.ngAfterViewInit();
-    if (this.donutElement) {
-      this.donut = ProgressDonut.getOrCreateInstance(this.donutElement.nativeElement);
-    }
-  }
-
-  // Dragover listener
-  @HostListener('dragover', ['$event'])
-  public onDragOver(evt: DragEvent): void {
-    evt.preventDefault();
-    evt.stopPropagation();
-    this.isDragover = !this.isLoading;
-  }
-
-  // Dragleave listener
-  @HostListener('dragleave', ['$event'])
-  public onDragLeave(evt: DragEvent): void {
-    evt.preventDefault();
-    evt.stopPropagation();
-    this.isDragover = false;
-  }
-
-  // Drop leave listener
-  @HostListener('drop', ['$event'])
-  public onDrop(evt: DragEvent): void {
-    evt.preventDefault();
-    evt.stopPropagation();
-
-    this.isDragover = false;
-    const files = evt.dataTransfer?.files;
-    if (this.isLoading || !files?.length) {
-      return;
-    }
-    this.start(files[0]);
-  }
-
-  /**
-   * On load file from input
-   * @param event
-   */
-  onLoadFile(event: Event): void {
-    const files = (event.target as HTMLInputElement)?.files;
-    if (!files?.length) {
-      return;
-    }
-    this.start(files[0]);
-  }
-
-  /**
-   * Start the upload file
-   * @param file
-   */
-  public start(file: File): void {
-    if (this.accept !== '*' && !this.accept.includes(file.type)) {
-      return;
-    }
-
-    this.reset();
-    this.isLoading = true;
-
-    const splitName = file.name.split('.');
-    this.filename = splitName[0];
-    this.extension = splitName[1]?.toUpperCase();
-    this.fileSize = ItFileUtils.getFileSizeString(file);
-
-    this.fileStartUpload.emit(file);
-  }
-
-  /**
-   * Percentage of upload
-   * @param value the percentage [0 - 100]
-   */
-  public progress(value: number) {
-    if (!this.isLoading) {
-      return;
-    }
-
-    if (value >= 100) {
-      this.success();
-    } else {
-      this.donut?.set((value < 0 ? 0 : value) / 100);
-    }
-  }
-
-  /**
-   * Upload success
-   */
-  public success(): void {
-    this.isLoading = false;
-    this.isSuccess = true;
-    this._changeDetectorRef.detectChanges();
-  }
-
-  /**
-   * Reset file uploader
-   */
-  public reset(): void {
-    this.isLoading = false;
-    this.isSuccess = false;
-    this.filename = this.extension = this.fileSize = undefined;
-    this.donut?.set(0);
-    this._changeDetectorRef.detectChanges();
-  }
-}

package/src/lib/components/form/upload-file-list/upload-file-list.component.html

@@ -1,46 +0,0 @@
-@if (!hideLoadButton) {
-  <input type="file" [id]="id" class="upload" [accept]="accept" [multiple]="multiple" (change)="onLoadFiles($event)" />
-  <label [for]="id">
-    <it-icon name="upload" size="sm"></it-icon>
-    <span>{{ 'it.form.upload' | translate }}</span>
-  </label>
-}
-
-@if (fileList.length) {
-  <ul class="upload-file-list" [class.upload-file-list-image]="images">
-    @for (item of fileList; track item.id) {
-      <li
-        class="upload-file"
-        [class.error]="item.error"
-        [class.uploading]="!item.error && item.progress !== undefined && item.progress > 0 && item.progress < 100"
-        [class.success]="!item.error && (!item.progress || item.progress >= 100)">
-        @if (images) {
-          <div class="upload-image">
-            <img [attr.src]="previewImages.get(item.id)" [alt]="item.file.name" />
-          </div>
-        } @else {
-          <it-icon name="file" size="sm" [color]="!item.error ? (item.progress ? 'secondary' : 'primary') : 'danger'"></it-icon>
-        }
-        <p [itTooltip]="item.tooltip">
-          <span class="visually-hidden">{{ 'it.form.uploaded-file' | translate: { name: item.file.name } }}</span>
-          {{ item.file.name }} <span class="upload-file-weight">{{ getFileSize(item.file) }}</span>
-        </p>
-        @if (item.removable && (!item.progress || item.progress < 100)) {
-          <button type="button" (click)="deleteItem.emit(item)">
-            <span class="visually-hidden">{{ 'it.form.delete-file' | translate: { name: item.file.name } }}</span>
-            <it-icon name="close"></it-icon>
-          </button>
-        }
-        @if ((!item.removable && !item.progress) || (item.progress !== undefined && item.progress >= 100)) {
-          <button type="button" disabled>
-            <span class="visually-hidden">{{ 'it.form.upload-complete' | translate }}</span>
-            <it-icon name="check"></it-icon>
-          </button>
-        }
-        @if (!item.error && item.progress !== undefined && item.progress > 0 && item.progress < 100) {
-          <it-progress-bar [value]="item.progress!"></it-progress-bar>
-        }
-      </li>
-    }
-  </ul>
-}

package/src/lib/components/form/upload-file-list/upload-file-list.component.spec.ts

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