design-angular-kit 1.1.4 → 1.2.1

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

@@ -0,0 +1,159 @@
+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/{lib/components/form/transfer/transfer.model.d.ts → src/lib/components/form/transfer/transfer.model.ts}

@@ -1,6 +1,13 @@
+//Qs
+//Aria hidden?
+//state management with service?
+//interface?
+
 export interface TransferItem<ValueType> {
-    text: string;
-    value: ValueType;
+  text: string;
+  value: ValueType;
 }
+
 export type TransferItemSelection<ValueType> = Array<TransferItem<ValueType>>;
+
 export type SourceType = 'source' | 'target';

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

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

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

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

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

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

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

@@ -0,0 +1,120 @@
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { ItAbstractComponent } from '../../../abstracts/abstract.component';
+import { UploadFileListItem } from '../../../interfaces/form';
+import { ItFileUtils } from '../../../utils/file-utils';
+import { forkJoin, take, tap } from 'rxjs';
+import { ItIconComponent } from '../../utils/icon/icon.component';
+import { TranslateModule } from '@ngx-translate/core';
+import { ItTooltipDirective } from '../../core/tooltip/tooltip.directive';
+import { ItProgressBarComponent } from '../../core/progress-bar/progress-bar.component';
+import { inputToBoolean } from '../../../utils/coercion';
+
+@Component({
+  standalone: true,
+  selector: 'it-upload-file-list',
+  templateUrl: './upload-file-list.component.html',
+  imports: [ItIconComponent, TranslateModule, ItTooltipDirective, ItProgressBarComponent],
+})
+export class ItUploadFileListComponent extends ItAbstractComponent implements OnInit, OnChanges {
+  /**
+   * The list of files to show in list
+   */
+  @Input({ required: true }) fileList!: Array<UploadFileListItem>;
+
+  /**
+   * 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 = '*';
+
+  /**
+   * If upload multiple files
+   * @default true
+   */
+  @Input({ transform: inputToBoolean }) multiple: boolean = true;
+
+  /**
+   * If is file list image
+   * @default false
+   */
+  @Input({ transform: inputToBoolean }) images?: boolean;
+
+  /**
+   * Hide the load button
+   * @default false
+   */
+  @Input({ transform: inputToBoolean }) hideLoadButton?: boolean;
+
+  /**
+   * Fired when upload new files
+   */
+  @Output() uploadFiles: EventEmitter<FileList> = new EventEmitter<FileList>();
+
+  /**
+   * Fired on delete item button click
+   */
+  @Output() deleteItem: EventEmitter<UploadFileListItem> = new EventEmitter<UploadFileListItem>();
+
+  /**
+   * Cache to preview image
+   */
+  previewImages: Map<number, string> = new Map<number, string>();
+
+  ngOnInit(): void {
+    if (!!this.images && this.accept === '*') {
+      this.accept = 'image/*';
+    }
+  }
+
+  override ngOnChanges(changes: SimpleChanges): void {
+    if (changes['fileList'] && !!this.images) {
+      const images$ = this.fileList.map(item =>
+        ItFileUtils.fileToBase64(item.file).pipe(
+          take(1),
+          tap(base64 => this.previewImages.set(item.id, base64))
+        )
+      );
+      forkJoin(images$).subscribe(() => {
+        this._changeDetectorRef.detectChanges();
+        super.ngOnChanges(changes);
+      });
+    } else {
+      super.ngOnChanges(changes);
+    }
+  }
+
+  /**
+   * On load file from input
+   * @param event
+   */
+  onLoadFiles(event: Event): void {
+    const input = event.target as HTMLInputElement;
+    const files = input?.files;
+    if (!files?.length) {
+      return;
+    }
+
+    const newFiles = Array.from(files).filter(
+      file =>
+        !this.fileList.some(item => {
+          return item.file.name === file.name && item.file.size === file.size && item.file.type === file.type;
+        })
+    );
+
+    const fileList = new DataTransfer();
+    newFiles.forEach(file => fileList.items.add(file));
+
+    this.uploadFiles.emit(fileList.files);
+    input.value = '';
+  }
+
+  /**
+   * Get the file size string
+   * @param file
+   */
+  getFileSize(file: File): string {
+    return ItFileUtils.getFileSizeString(file);
+  }
+}

package/src/lib/components/navigation/back-button/back-button.component.html

@@ -0,0 +1,25 @@
+@if (buttonStyle === 'link') {
+  <a href="#" class="go-back" (click)="goBack($event)">
+    <ng-container *ngTemplateOutlet="content"></ng-container>
+  </a>
+}
+
+@if (buttonStyle === 'button') {
+  <button itButton="primary" class="go-back" (click)="goBack($event)">
+    <ng-container *ngTemplateOutlet="content"></ng-container>
+  </button>
+}
+
+<ng-template #content>
+  @if (showIcon) {
+    <it-icon
+      size="sm"
+      [name]="direction === 'left' ? 'arrow-left' : 'arrow-up'"
+      [color]="buttonStyle === 'link' ? 'primary' : 'white'"
+      [class.me-2]="showText"></it-icon>
+  }
+
+  <span [class.visually-hidden]="!showText">
+    {{ (direction === 'left' ? 'it.navigation.go-back' : 'it.navigation.upper-level') | translate }}
+  </span>
+</ng-template>