design-angular-kit 1.2.1 → 1.2.2

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

@@ -1,102 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-import { ItAbstractComponent } from '../../../../abstracts/abstract.component';
-import { ItIconComponent } from '../../../utils/icon/icon.component';
-import { DatePipe, NgClass } from '@angular/common';
-import { TranslateModule } from '@ngx-translate/core';
-import { TimelinePINType } from '../../../../interfaces/core';
-import { IconName } from '../../../../interfaces/icon';
-import { inputToBoolean } from '../../../../utils/coercion';
-
-/**
- * Timeline Item
- * @description Represents a single event for Timeline component.
- */
-@Component({
-  standalone: true,
-  selector: 'it-timeline-item',
-  templateUrl: './timeline-item.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [ItIconComponent, DatePipe, TranslateModule, NgClass],
-})
-export class ItTimelineItemComponent extends ItAbstractComponent {
-  /**
-   * Timeline element title
-   */
-  @Input({ required: true }) title!: string;
-
-  /**
-   * Timeline element text
-   */
-  @Input({ required: true }) text!: string;
-
-  /**
-   * Timeline element signature
-   */
-  @Input() signature: string | undefined;
-
-  /**
-   * Timeline element reference date
-   */
-  @Input() eventDate: Date | undefined;
-
-  /**
-   * Timeline element reference date format
-   * @default dd/MM/yyyy
-   */
-  @Input() dateFormat: string = 'dd/MM/yyyy';
-
-  /**
-   * Timeline element PIN text
-   */
-  @Input({ required: true }) pinText: string | undefined;
-
-  /**
-   * Timeline element PIN type
-   * @default none
-   */
-  @Input() pinType: TimelinePINType | undefined = 'default';
-
-  /**
-   * Timeline element PIN icon
-   * @default code-circle
-   */
-  @Input() pinIcon: IconName | undefined = 'code-circle';
-
-  /**
-   * Timeline element PIN icon
-   * @default code-circle
-   */
-  @Input() pinIconTitle: string | undefined;
-
-  /**
-   * Timeline element category label
-   */
-  @Input() categoryLabel: string | undefined = 'Categoria evento: ';
-
-  /**
-   * Timeline element date label
-   */
-  @Input() dateLabel: string | undefined = 'Data evento: ';
-
-  /**
-   * Timeline element category title
-   */
-  @Input() categoryTitle: string | undefined;
-
-  /**
-   * Timeline element category link
-   */
-  @Input() categoryLink: string | undefined;
-
-  /**
-   * Timeline element show detail link
-   * @default false
-   */
-  @Input({ transform: inputToBoolean })
-  showReadMore: boolean = false;
-
-  /** Timeline element detail link
-   * @default #
-   */
-  @Input() readMoreLink: string | undefined = '#';
-}

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

@@ -1,21 +0,0 @@
-<div class="it-timeline-wrapper">
-  <div class="row">
-    @for (element of timelineElements; track $index) {
-      <div class="col-12">
-        <it-timeline-item
-          [title]="element.title"
-          [text]="element.text"
-          [signature]="element.signature"
-          [pinType]="element.pin?.type"
-          [pinIcon]="element.pin?.icon"
-          [pinText]="element.pin?.text"
-          [eventDate]="element.eventDate"
-          [dateFormat]="dateFormat"
-          [categoryTitle]="element.category?.title"
-          [categoryLink]="element.category?.link"
-          [showReadMore]="!!element.link?.length"
-          [readMoreLink]="element.link" />
-      </div>
-    }
-  </div>
-</div>

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

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

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

@@ -1,31 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-import { ItTimelineItemComponent } from './timeline-item/timeline-item.component';
-import { ItIconComponent } from '../../utils/icon/icon.component';
-import { TranslateModule } from '@ngx-translate/core';
-import { ItAbstractComponent } from '../../../abstracts/abstract.component';
-import { TimelineElement } from '../../../interfaces/core';
-
-/**
- * Timeline
- * @description Build timeline for chronological representation of events.
- */
-@Component({
-  standalone: true,
-  selector: 'it-timeline',
-  templateUrl: './timeline.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [ItIconComponent, TranslateModule, ItTimelineItemComponent],
-})
-export class ItTimelineComponent extends ItAbstractComponent {
-  /**
-   * Timeline elements array
-   * @default []
-   */
-  @Input() timelineElements: TimelineElement[] = [];
-
-  /**
-   * Default date format for timeline element reference date
-   * @default dd/MM/yyyy
-   */
-  @Input() dateFormat: string = 'dd/MM/yyyy';
-}

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

@@ -1,11 +0,0 @@
-import { NgModule } from '@angular/core';
-import { ItTimelineComponent } from './timeline.component';
-import { ItTimelineItemComponent } from './timeline-item/timeline-item.component';
-
-const timelineComponents = [ItTimelineComponent, ItTimelineItemComponent];
-
-@NgModule({
-  imports: timelineComponents,
-  exports: timelineComponents,
-})
-export class ItTimelineModule {}

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

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

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

@@ -1,141 +0,0 @@
-import { AfterViewInit, Directive, ElementRef, EventEmitter, Input, OnDestroy, Output } from '@angular/core';
-import { ElementPlacement } from '../../../interfaces/core';
-import { Tooltip } from 'bootstrap-italia';
-import { inputToBoolean } from '../../../utils/coercion';
-
-@Directive({
-  standalone: true,
-  selector: '[itTooltip]',
-  exportAs: 'itTooltip',
-})
-export class ItTooltipDirective implements AfterViewInit, OnDestroy {
-  /**
-   * Define the tooltip title
-   * @param title the tooltip title
-   */
-  @Input('itTooltip') set title(title: string | undefined) {
-    if (title) {
-      // this.element.setAttribute("title", title);
-      this.element.setAttribute('data-bs-original-title', title);
-    }
-  }
-
-  /**
-   * Define the tooltip placement
-   * @param placement
-   */
-  @Input() set tooltipPlacement(placement: ElementPlacement) {
-    this.element.setAttribute('data-bs-placement', placement);
-  }
-
-  /**
-   * Indicates whether the title contains html
-   * @param html true if contain html
-   */
-  @Input({ transform: inputToBoolean }) set tooltipHtml(html: boolean) {
-    this.element.setAttribute('data-bs-html', html ? 'true' : 'false');
-  }
-
-  /**
-   * 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 tooltip?: Tooltip;
-
-  constructor(private readonly _elementRef: ElementRef) {
-    this.element = this._elementRef.nativeElement;
-  }
-
-  ngAfterViewInit(): void {
-    this.element.setAttribute('data-bs-toggle', 'tooltip');
-    this.tooltip = Tooltip.getOrCreateInstance(this.element);
-
-    this.element.addEventListener('show.bs.tooltip', event => this.showEvent.emit(event));
-    this.element.addEventListener('shown.bs.tooltip', event => this.shownEvent.emit(event));
-    this.element.addEventListener('hide.bs.tooltip', event => this.hideEvent.emit(event));
-    this.element.addEventListener('hidden.bs.tooltip', event => this.hiddenEvent.emit(event));
-    this.element.addEventListener('inserted.bs.tooltip', event => this.insertedEvent.emit(event));
-  }
-
-  ngOnDestroy(): void {
-    this.dispose();
-  }
-
-  /**
-   * Shows the tooltip of an item.
-   */
-  public show(): void {
-    this.tooltip?.show();
-  }
-
-  /**
-   * Hide the tooltip of an element.
-   */
-  public hide(): void {
-    this.tooltip?.hide();
-  }
-
-  /**
-   * Activate / Deactivate the tooltip of an element
-   */
-  public toggle(): void {
-    this.tooltip?.toggle();
-  }
-
-  /**
-   * Hides and destroys the tooltip of an element.
-   */
-  public dispose(): void {
-    this.tooltip?.dispose();
-  }
-
-  /**
-   * Gives the tooltip of an element a chance to be shown.
-   */
-  public enable(): void {
-    this.tooltip?.enable();
-  }
-
-  /**
-   * Removes the ability to show the tooltip of an element.
-   */
-  public disable(): void {
-    this.tooltip?.disable();
-  }
-
-  /**
-   * Toggles the possibility that the tooltip of an element is shown or hidden.
-   */
-  public toggleEnabled(): void {
-    this.tooltip?.disable();
-  }
-
-  /**
-   * Updates the position of an element's tooltip.
-   */
-  public update(): void {
-    this.tooltip?.disable();
-  }
-}

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

@@ -1,58 +0,0 @@
-<div class="form-group" [class.autocomplete-wrapper-big]="big">
-  @if (label) {
-    <label [for]="id" [class.visually-hidden]="!isActiveLabel" [class.active]="isActiveLabel">
-      {{ label }}
-    </label>
-  }
-
-  <input
-    [id]="id"
-    type="search"
-    class="autocomplete form-control"
-    [placeholder]="placeholder"
-    [formControl]="control"
-    [class.is-invalid]="isInvalid"
-    [class.is-valid]="isValid"
-    (blur)="markAsTouched()"
-    (keydown)="onKeyDown()" />
-
-  <span class="autocomplete-icon" aria-hidden="true">
-    <it-icon [labelWaria]="labelWaria" name="search" size="sm"></it-icon>
-  </span>
-
-  @if (autocompleteResults$ | async; as autocomplete) {
-    <ul class="autocomplete-list" [class.autocomplete-list-show]="autocomplete.relatedEntries?.length && showAutocompletion">
-      @for (entry of autocomplete.relatedEntries; track autocompleteItemTrackByValueFn($index, entry)) {
-        <li>
-          <a [href]="entry.link" (click)="onEntryClick(entry, $event)">
-            @if (entry.avatarSrcPath) {
-              <div class="avatar size-sm">
-                <img [src]="entry.avatarSrcPath" [alt]="entry.avatarAltText" />
-              </div>
-            }
-            @if (entry.icon) {
-              <it-icon [name]="entry.icon" size="sm"></it-icon>
-            }
-            <span class="autocomplete-list-text">
-              <span [innerHTML]="entry.value | itMarkMatchingText: autocomplete.searchedValue"></span>
-              @if (entry.label) {
-                <em>{{ entry.label }}</em>
-              }
-            </span>
-          </a>
-        </li>
-      }
-    </ul>
-  }
-
-  @if (isInvalid) {
-    <div class="form-feedback just-validate-error-label" [id]="id + '-error'">
-      <div #customError>
-        <ng-content select="[error]"></ng-content>
-      </div>
-      @if (!customError.hasChildNodes()) {
-        {{ invalidMessage | async }}
-      }
-    </div>
-  }
-</div>

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

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

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

@@ -1,130 +0,0 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { debounceTime, distinctUntilChanged, map, Observable, of, switchMap } from 'rxjs';
-import { AsyncPipe, NgTemplateOutlet } from '@angular/common';
-import { ReactiveFormsModule } from '@angular/forms';
-import { ItIconComponent } from '../../utils/icon/icon.component';
-import { ItMarkMatchingTextPipe } from '../../../pipes/mark-matching-text.pipe';
-import { ItAbstractFormComponent } from '../../../abstracts/abstract-form.component';
-import { AutocompleteItem } from '../../../interfaces/form';
-import { inputToBoolean } from '../../../utils/coercion';
-
-@Component({
-  standalone: true,
-  selector: 'it-autocomplete',
-  templateUrl: './autocomplete.component.html',
-  imports: [AsyncPipe, ItIconComponent, ItMarkMatchingTextPipe, NgTemplateOutlet, ReactiveFormsModule],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ItAutocompleteComponent extends ItAbstractFormComponent<string | null | undefined> implements OnInit {
-  /**
-   * Indicates the list of searchable elements on which to base the input autocomplete system
-   * If you need to retrieve items via API, can pass a function of Observable
-   * @default undefined
-   */
-  @Input({ required: true }) autocompleteData!: Array<AutocompleteItem> | ((search?: string | null) => Observable<Array<AutocompleteItem>>);
-
-  /**
-   * To get a large version of Autocomplete
-   */
-  @Input({ transform: inputToBoolean }) big?: boolean;
-
-  /**
-   * Time span [ms] has passed without another source emission, to delay data filtering.
-   * Useful when the user is typing multiple letters
-   * @default 300 [ms]
-   */
-  @Input() debounceTime = 300;
-
-  /**
-   * The input placeholder
-   */
-  @Input() placeholder = '';
-
-  /**
-   * The input label even get labelWaria icon
-   */
-  @Input() labelWaria: string | undefined = undefined;
-
-  /**
-   * Show the label
-   */
-  @Input({ transform: inputToBoolean }) forceShowLabel: boolean = true;
-
-  /**
-   * Fired when the Autocomplete Item has been selected
-   */
-  @Output() autocompleteSelectedEvent: EventEmitter<AutocompleteItem> = new EventEmitter();
-
-  protected showAutocompletion = false;
-
-  /** Observable da cui vengono emessi i risultati dell'auto completamento */
-  protected autocompleteResults$: Observable<{
-    searchedValue: string | undefined | null;
-    relatedEntries: Array<AutocompleteItem>;
-  }> = new Observable();
-
-  override ngOnInit() {
-    super.ngOnInit();
-    this.autocompleteResults$ = this.getAutocompleteResults$();
-  }
-
-  /**
-   * Create the autocomplete list
-   */
-  private getAutocompleteResults$(): Observable<{
-    searchedValue: string | null | undefined;
-    relatedEntries: Array<AutocompleteItem>;
-  }> {
-    return this.control.valueChanges.pipe(
-      debounceTime(this.debounceTime), // Delay filter data after time span has passed without another source emission, useful when the user is typing multiple letters
-      distinctUntilChanged(), // Only if searchValue is distinct in comparison to the last value
-      switchMap(searchedValue => {
-        if (!this.autocompleteData) {
-          return of({
-            searchedValue,
-            relatedEntries: <Array<AutocompleteItem>>[],
-          });
-        }
-
-        const autoCompleteData$ = Array.isArray(this.autocompleteData) ? of(this.autocompleteData) : this.autocompleteData(searchedValue);
-        return autoCompleteData$.pipe(
-          map(autocompleteData => {
-            if (!searchedValue || typeof searchedValue === 'number') {
-              return { searchedValue, relatedEntries: [] };
-            }
-
-            const lowercaseValue = searchedValue.toLowerCase();
-            const relatedEntries = autocompleteData.filter(item => item.value?.toLowerCase().includes(lowercaseValue));
-
-            return { searchedValue, relatedEntries };
-          })
-        );
-      })
-    );
-  }
-
-  protected onEntryClick(entry: AutocompleteItem, event: Event) {
-    // Se non è stato definito un link associato all'elemento dell'autocomplete, probabilmente il desiderata
-    // non è effettuare la navigazione al default '#', pertanto in tal caso meglio annullare la navigazione.
-    if (!entry.link) {
-      event.preventDefault();
-    }
-
-    this.autocompleteSelectedEvent.next(entry);
-    this.control.setValue(entry.value);
-    this.showAutocompletion = false;
-  }
-
-  protected autocompleteItemTrackByValueFn(index: number, item: AutocompleteItem) {
-    return item.value;
-  }
-
-  protected onKeyDown() {
-    this.showAutocompletion = true;
-  }
-
-  protected get isActiveLabel(): boolean {
-    const value = this.control.value;
-    return this.forceShowLabel && (!!value || !!this.placeholder);
-  }
-}

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

@@ -1,67 +0,0 @@
-<ng-container>
-  <div class="form-check" [class.form-check-group]="group" [class.form-check-inline]="inline">
-    @if (toggle) {
-      <div class="toggles">
-        <label [for]="id">
-          <ng-container *ngTemplateOutlet="htmlLabel"></ng-container>
-          <input
-            [id]="id"
-            type="checkbox"
-            [formControl]="control"
-            [attr.aria-describedby]="id + '-help'"
-            (click)="$event.stopPropagation()" />
-          <span class="lever"></span>
-        </label>
-      </div>
-    } @else {
-      <input
-        [id]="id"
-        type="checkbox"
-        [class.is-invalid]="isInvalid"
-        [class.is-valid]="isValid"
-        [class.semi-checked]="indeterminate"
-        [formControl]="control"
-        [attr.aria-describedby]="id + '-help'"
-        (click)="$event.stopPropagation()" />
-      <label class="form-check-label" [for]="id">
-        <ng-container *ngTemplateOutlet="htmlLabel"></ng-container>
-      </label>
-    }
-
-    @if (group) {
-      <small [id]="id + '-help'" class="form-text">
-        <ng-content></ng-content>
-      </small>
-    }
-
-    @if (isInvalid && group) {
-      <div class="form-feedback just-validate-error-label" [id]="id + '-error'">
-        <ng-container *ngTemplateOutlet="error"></ng-container>
-      </div>
-    }
-  </div>
-
-  @if (isInvalid && !group) {
-    <div class="form-feedback just-validate-error-label" [id]="id + '-error'">
-      <ng-container *ngTemplateOutlet="error"></ng-container>
-    </div>
-  }
-</ng-container>
-
-<ng-template #error>
-  <div #customError>
-    <ng-content select="[error]"></ng-content>
-  </div>
-  @if (!customError.hasChildNodes()) {
-    {{ invalidMessage | async }}
-  }
-</ng-template>
-
-<ng-template #htmlLabel>
-  <div #customLabel>
-    <ng-content select="[label]"></ng-content>
-  </div>
-  @if (!customLabel.hasChildNodes()) {
-    {{ label }}
-  }
-</ng-template>

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

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