design-angular-kit 1.2.1 → 1.2.2

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

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

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

package/src/lib/components/navigation/back-button/back-button.component.spec.ts

@@ -1,91 +0,0 @@
-import { ChangeDetectionStrategy } from '@angular/core';
-import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { ItBackButtonComponent } from './back-button.component';
-import { tb_base } from '../../../../test';
-
-describe('ItBackButtonComponent', () => {
-  let component: ItBackButtonComponent;
-  let fixture: ComponentFixture<ItBackButtonComponent>;
-
-  beforeEach(fakeAsync(() => {
-    TestBed.configureTestingModule(tb_base)
-      .overrideComponent(ItBackButtonComponent, {
-        set: { changeDetection: ChangeDetectionStrategy.Default },
-      })
-      .compileComponents();
-
-    fixture = TestBed.createComponent(ItBackButtonComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  }));
-
-  it('deve crearsi', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('deve essere di default un bottone', () => {
-    expect(component.buttonStyle).toBe('button');
-    const buttonElement = fixture.debugElement.query(By.css('button'));
-    expect(buttonElement).toBeTruthy();
-    const aElement = fixture.debugElement.query(By.css('a'));
-    expect(aElement).toBeFalsy();
-  });
-
-  it('deve poter essere un link', () => {
-    expect(component.buttonStyle).toBe('button');
-    component.buttonStyle = 'link';
-    fixture.detectChanges();
-    expect(component.buttonStyle).toBe('link');
-    const aElement = fixture.debugElement.query(By.css('a'));
-    expect(aElement).toBeTruthy();
-  });
-
-  it('il testo deve poter essere rimosso', () => {
-    expect(component.showText).toBe(true);
-    component.showText = false;
-    fixture.detectChanges();
-    expect(component.showText).toBe(false);
-    const visuallyElement = fixture.debugElement.query(By.css('.visually-hidden'));
-    expect(visuallyElement).toBeTruthy();
-  });
-
-  it("l'icona deve poter essere rimossa", () => {
-    component.showIcon = false;
-    fixture.detectChanges();
-    expect(component.showIcon).toBe(false);
-    const svgElement = fixture.debugElement.query(By.css('svg'));
-    expect(svgElement).toBeFalsy();
-  });
-
-  it('il click deve triggerare il location.back() se bottone', () => {
-    spyOn(component._location, 'back').and.returnValue();
-    fixture.detectChanges();
-    const buttonElement = fixture.debugElement.query(By.css('button'));
-    buttonElement.nativeElement.click();
-    expect(component._location.back).toHaveBeenCalled();
-  });
-
-  it('il click deve triggerare il location.back() se link', () => {
-    spyOn(component._location, 'back').and.returnValue();
-    component.buttonStyle = 'link';
-    fixture.detectChanges();
-    const aElement = fixture.debugElement.query(By.css('a'));
-    aElement.nativeElement.removeAttribute('href');
-    fixture.detectChanges();
-    aElement.nativeElement.click();
-    expect(component._location.back).toHaveBeenCalled();
-  });
-
-  it('se passo una callback backFn, al click deve essere lanciata lei', () => {
-    component.backFn = () => {};
-    component.buttonStyle = 'link';
-    fixture.detectChanges();
-    spyOn(component, 'backFn');
-    const aElement = fixture.debugElement.query(By.css('a'));
-    aElement.nativeElement.removeAttribute('href');
-    fixture.detectChanges();
-    aElement.nativeElement.click();
-    expect(component.backFn).toHaveBeenCalled();
-  });
-});

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

@@ -1,67 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-import { Location, NgTemplateOutlet } from '@angular/common';
-import { ItButtonDirective } from '../../core/button/button.directive';
-import { ItIconComponent } from '../../utils/icon/icon.component';
-import { TranslateModule } from '@ngx-translate/core';
-import { inputToBoolean } from '../../../utils/coercion';
-
-@Component({
-  standalone: true,
-  selector: 'it-back-button',
-  templateUrl: './back-button.component.html',
-  exportAs: 'itBackButton',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [NgTemplateOutlet, ItButtonDirective, ItIconComponent, TranslateModule],
-})
-export class ItBackButtonComponent {
-  /**
-   * Back button style
-   * - <b>link</b>: use a link with icon and text
-   * - <b>button</b>: use a button with icon and text
-   * @default button
-   */
-  @Input() buttonStyle: 'link' | 'button' = 'button';
-
-  /**
-   * Button direction
-   * - <b>left</b>: Back direction
-   * - <b>up</b>: Upper direction
-   * @default left
-   */
-  @Input() direction: 'left' | 'up' = 'left';
-
-  /**
-   * Show/Hide icon
-   * @default true
-   */
-  @Input({ transform: inputToBoolean }) showIcon: boolean = true;
-
-  /**
-   * Show/Hide text
-   * @default true
-   */
-  @Input({ transform: inputToBoolean }) showText: boolean = true;
-
-  /**
-   * Custom back logic <br/>
-   *
-   * NOTE: to use 'this' need bind function  <br/>
-   * @example backCbFn = this.errorCallback.bind(this);
-   * (errorCallback is your function, pass backCbFn to the component)
-   */
-  @Input() backFn?: (location: Location) => void;
-
-  constructor(public readonly _location: Location) {}
-
-  /**
-   * Go back function
-   */
-  public goBack(event: Event): void {
-    event.preventDefault();
-    if (this.backFn) {
-      return this.backFn(this._location);
-    }
-
-    this._location.back();
-  }
-}

package/src/lib/components/navigation/back-to-top/back-to-top.component.html

@@ -1,11 +0,0 @@
-<a
-  #backToTop
-  [id]="id"
-  href="#"
-  [attr.aria-label]="ariaLabel"
-  class="back-to-top"
-  [class.back-to-top-small]="small"
-  [class.shadow]="shadow"
-  [class.dark]="dark">
-  <it-icon name="arrow-up" [color]="dark ? 'secondary' : 'light'"></it-icon>
-</a>

package/src/lib/components/navigation/back-to-top/back-to-top.component.spec.ts

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

package/src/lib/components/navigation/back-to-top/back-to-top.component.ts

@@ -1,80 +0,0 @@
-import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, Input, ViewChild } from '@angular/core';
-import { ItAbstractComponent } from '../../../abstracts/abstract.component';
-import { BackToTop } from 'bootstrap-italia';
-import { ItIconComponent } from '../../utils/icon/icon.component';
-import { inputToBoolean } from '../../../utils/coercion';
-
-@Component({
-  standalone: true,
-  selector: 'it-back-to-top',
-  templateUrl: './back-to-top.component.html',
-  exportAs: 'itBackToTop',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [ItIconComponent],
-})
-export class ItBackToTopComponent extends ItAbstractComponent implements AfterViewInit {
-  /**
-   * Aria label for the component
-   * @default 'Torna su'
-   */
-  @Input() ariaLabel: string = 'Torna su';
-
-  /**
-   * Show small button
-   * @default false
-   */
-  @Input({ transform: inputToBoolean }) small?: boolean;
-
-  /**
-   * Show shadow
-   * @default false
-   */
-  @Input({ transform: inputToBoolean }) shadow?: boolean;
-
-  /**
-   * Button usable button on a dark background
-   * @default false
-   */
-  @Input({ transform: inputToBoolean }) dark?: boolean;
-
-  private backToTop?: BackToTop;
-
-  @ViewChild('backToTop') private backToTopElement?: ElementRef<HTMLAnchorElement>;
-
-  override ngAfterViewInit() {
-    super.ngAfterViewInit();
-
-    if (this.backToTopElement) {
-      const element = this.backToTopElement.nativeElement;
-      this.backToTop = BackToTop.getOrCreateInstance(element);
-    }
-  }
-
-  /**
-   * Show button
-   */
-  public show(): void {
-    this.backToTop?.show();
-  }
-
-  /**
-   * Hide the button
-   */
-  public hide(): void {
-    this.backToTop?.hide();
-  }
-
-  /**
-   * Activates the scroll animation towards the Y coordinate indicated by the positionTop option
-   */
-  public scrollToTop(): void {
-    this.backToTop?.scrollToTop();
-  }
-
-  /**
-   * Eliminate component features
-   */
-  public dispose(): void {
-    this.backToTop?.dispose();
-  }
-}

package/src/lib/components/navigation/breadcrumbs/breadcrumb/breadcrumb.component.html

@@ -1,23 +0,0 @@
-<nav class="breadcrumb-container" [attr.aria-label]="'it.navigation.navigation-path' | translate">
-  @if (items) {
-    <ol class="breadcrumb" [class.dark]="dark" [class.px-3]="dark">
-      @for (item of items; track item; let isLast = $last) {
-        <li class="breadcrumb-item" [class.active]="item.active" [attr.aria-current]="item.active ? 'page' : null">
-          @if (item.iconName) {
-            <it-icon [name]="item.iconName" [color]="dark ? 'white' : 'secondary'" size="sm" svgClass="align-top me-1"></it-icon>
-          }
-          @if (!item.active && !isLast) {
-            <it-link [href]="item.href" [class]="item.class" [externalLink]="item.externalLink" [disabled]="item.disabled">
-              <ng-container *ngTemplateOutlet="item.htmlContent"></ng-container>
-            </it-link>
-          } @else {
-            <ng-container *ngTemplateOutlet="item.htmlContent"></ng-container>
-          }
-          @if (!isLast) {
-            <span class="separator">{{ separator }}</span>
-          }
-        </li>
-      }
-    </ol>
-  }
-</nav>

package/src/lib/components/navigation/breadcrumbs/breadcrumb/breadcrumb.component.spec.ts

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

package/src/lib/components/navigation/breadcrumbs/breadcrumb/breadcrumb.component.ts

@@ -1,68 +0,0 @@
-import {
-  AfterViewInit,
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ContentChildren,
-  Input,
-  OnDestroy,
-  QueryList,
-} from '@angular/core';
-import { ItBreadcrumbItemComponent } from '../breadcrumb-item/breadcrumb-item.component';
-import { startWith, Subscription } from 'rxjs';
-import { NgTemplateOutlet } from '@angular/common';
-import { TranslateModule } from '@ngx-translate/core';
-import { ItIconComponent } from '../../../utils/icon/icon.component';
-import { ItLinkComponent } from '../../../core/link/link.component';
-import { inputToBoolean } from '../../../../utils/coercion';
-
-@Component({
-  standalone: true,
-  selector: 'it-breadcrumb',
-  templateUrl: './breadcrumb.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [TranslateModule, ItIconComponent, ItLinkComponent, NgTemplateOutlet],
-})
-export class ItBreadcrumbComponent implements AfterViewInit, OnDestroy {
-  /**
-   * The character to use as separator
-   * @default /
-   */
-  @Input() separator: string = '/';
-
-  /**
-   * Dark style
-   * @default false
-   */
-  @Input({ transform: inputToBoolean }) dark?: boolean;
-
-  /**
-   * The tab items
-   */
-  @ContentChildren(ItBreadcrumbItemComponent) items?: QueryList<ItBreadcrumbItemComponent>;
-
-  private itemSubscriptions?: Array<Subscription>;
-
-  constructor(private readonly _changeDetectorRef: ChangeDetectorRef) {}
-
-  ngAfterViewInit(): void {
-    this.items?.changes
-      .pipe(
-        // When breadcrumb items changes (dynamic add/remove)
-        startWith(undefined)
-      )
-      .subscribe(() => {
-        this.itemSubscriptions?.forEach(sub => sub.unsubscribe()); // Remove old subscriptions
-        this.itemSubscriptions = this.items?.map(item =>
-          item.valueChanges.subscribe(() => {
-            this._changeDetectorRef.detectChanges(); // DetectChanges when breadcrumb item attributes changes
-          })
-        );
-        this._changeDetectorRef.detectChanges(); // Force update html render
-      });
-  }
-
-  ngOnDestroy(): void {
-    this.itemSubscriptions?.forEach(item => item.unsubscribe());
-  }
-}

package/src/lib/components/navigation/breadcrumbs/breadcrumb-item/breadcrumb-item.component.html

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

package/src/lib/components/navigation/breadcrumbs/breadcrumb-item/breadcrumb-item.component.spec.ts

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

package/src/lib/components/navigation/breadcrumbs/breadcrumb-item/breadcrumb-item.component.ts

@@ -1,29 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input, TemplateRef, ViewChild } from '@angular/core';
-import { IconName } from '../../../../interfaces/icon';
-import { ItLinkComponent } from '../../../core/link/link.component';
-import { inputToBoolean } from '../../../../utils/coercion';
-
-@Component({
-  standalone: true,
-  selector: 'it-breadcrumb-item',
-  templateUrl: './breadcrumb-item.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [],
-})
-export class ItBreadcrumbItemComponent extends ItLinkComponent {
-  /**
-   * Is active breadcrumb item
-   * @default false
-   */
-  @Input({ transform: inputToBoolean }) active?: boolean;
-
-  /**
-   * The name of icon to show
-   */
-  @Input() iconName: IconName | undefined;
-
-  /**
-   * The content of item
-   */
-  @ViewChild(TemplateRef) public htmlContent!: TemplateRef<any>;
-}

package/src/lib/components/navigation/breadcrumbs/breadcrumbs.module.ts

@@ -1,11 +0,0 @@
-import { NgModule } from '@angular/core';
-import { ItBreadcrumbComponent } from './breadcrumb/breadcrumb.component';
-import { ItBreadcrumbItemComponent } from './breadcrumb-item/breadcrumb-item.component';
-
-const breadcrumb = [ItBreadcrumbComponent, ItBreadcrumbItemComponent];
-
-@NgModule({
-  imports: breadcrumb,
-  exports: breadcrumb,
-})
-export class ItBreadcrumbsModule {}