design-angular-kit 1.2.0 → 1.2.1

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

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

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

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

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

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

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

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

@@ -0,0 +1,65 @@
+import { ChangeDetectionStrategy, Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { ItAbstractFormComponent } from '../../../abstracts/abstract-form.component';
+import { AsyncPipe, NgTemplateOutlet } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
+import { inputToBoolean } from '../../../utils/coercion';
+
+@Component({
+  standalone: true,
+  selector: 'it-checkbox',
+  templateUrl: './checkbox.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [NgTemplateOutlet, ReactiveFormsModule, AsyncPipe],
+})
+export class ItCheckboxComponent extends ItAbstractFormComponent<boolean | null | undefined> implements OnInit, OnChanges {
+  /**
+   * If show checkbox as toggle
+   * @default false
+   */
+  @Input({ transform: inputToBoolean }) toggle?: boolean;
+
+  /**
+   * If show checkbox inline
+   * @default false
+   */
+  @Input({ transform: inputToBoolean }) inline?: boolean;
+
+  /**
+   * If is checkbox group
+   * @default false
+   */
+  @Input({ transform: inputToBoolean }) group?: boolean;
+
+  /**
+   * If checkbox is checked
+   * @default false
+   */
+  @Input({ transform: inputToBoolean }) checked?: boolean;
+
+  /**
+   * If checkbox is indeterminate
+   * @default false
+   */
+  @Input({ transform: inputToBoolean }) indeterminate?: boolean;
+
+  override ngOnInit() {
+    super.ngOnInit();
+    this.markAsChecked();
+  }
+
+  override ngOnChanges(changes: SimpleChanges) {
+    if (changes['checked']) {
+      this.markAsChecked();
+    }
+  }
+
+  private markAsChecked(): void {
+    if (this.control.value || this.checked === undefined) {
+      return;
+    }
+
+    const value = this.checked;
+    this.writeValue(value);
+    return this.onChange(value);
+  }
+}

package/src/lib/components/form/form.module.ts

@@ -0,0 +1,34 @@
+import { NgModule } from '@angular/core';
+import { ItCheckboxComponent } from './checkbox/checkbox.component';
+import { ItInputComponent } from './input/input.component';
+import { ItPasswordInputComponent } from './password-input/password-input.component';
+import { ItRadioButtonComponent } from './radio-button/radio-button.component';
+import { ItRangeComponent } from './range/range.component';
+import { ItRatingComponent } from './rating/rating.component';
+import { ItSelectComponent } from './select/select.component';
+import { ItTextareaComponent } from './textarea/textarea.component';
+import { ItUploadDragDropComponent } from './upload-drag-drop/upload-drag-drop.component';
+import { ItUploadFileListComponent } from './upload-file-list/upload-file-list.component';
+import { ItAutocompleteComponent } from './autocomplete/autocomplete.component';
+import { ItTransferComponent } from './transfer/transfer.component';
+
+const formComponents = [
+  ItAutocompleteComponent,
+  ItCheckboxComponent,
+  ItInputComponent,
+  ItPasswordInputComponent,
+  ItRadioButtonComponent,
+  ItRangeComponent,
+  ItRatingComponent,
+  ItSelectComponent,
+  ItTextareaComponent,
+  ItTransferComponent,
+  ItUploadDragDropComponent,
+  ItUploadFileListComponent,
+];
+
+@NgModule({
+  imports: formComponents,
+  exports: formComponents,
+})
+export class ItFormModule {}

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

@@ -0,0 +1,92 @@
+<div class="form-group">
+  <div
+    class="input-group"
+    [class.disabled]="!control.enabled"
+    [class.input-number]="type === 'number'"
+    [class.input-number-currency]="currency"
+    [class.input-number-percentage]="percentage"
+    [class.input-number-adaptive]="adaptive">
+    <span class="input-group-text" #prependText>
+      <ng-content select="[prependText]"></ng-content>
+    </span>
+    @if (label) {
+      <label
+        [for]="id"
+        [class.active]="isActiveLabel"
+        [class.input-symbol-label]="percentage || currency"
+        [class.input-number-label]="type === 'number'"
+        [class.empty-prepend-label]="!(percentage || currency) && !prependText.clientWidth">
+        {{ label }}
+      </label>
+    }
+
+    @if (type === 'number') {
+      @if (currency || percentage) {
+        <span class="input-group-text fw-semibold">{{ symbol }}</span>
+      }
+      <input
+        type="number"
+        [id]="id"
+        [step]="step ?? null"
+        [min]="min ?? ''"
+        [max]="max ?? ''"
+        [class.form-control]="readonly !== 'plaintext'"
+        [class.form-control-plaintext]="readonly === 'plaintext'"
+        [class.is-invalid]="isInvalid"
+        [class.just-validate-success-field]="isValid"
+        [formControl]="control"
+        [placeholder]="placeholder"
+        [readonly]="isReadonly"
+        [autocomplete]="autocomplete"
+        [attr.aria-describedby]="id + '-description'"
+        (blur)="markAsTouched()" />
+      <span class="input-group-text align-buttons flex-column">
+        <button type="button" class="input-number-add" [disabled]="!control.enabled" (click)="incrementNumber()">
+          <span class="visually-hidden">{{ 'it.form.increase-value' | translate }}</span>
+        </button>
+        <button type="button" class="input-number-sub" [disabled]="!control.enabled" (click)="incrementNumber(true)">
+          <span class="visually-hidden">{{ 'it.form.decrease-value' | translate }}</span>
+        </button>
+      </span>
+    } @else {
+      <input
+        [id]="id"
+        [type]="type"
+        [max]="type === 'date' ? maxDate : undefined"
+        [min]="type === 'date' ? minDate : undefined"
+        [class.form-control]="readonly !== 'plaintext'"
+        [class.form-control-plaintext]="readonly === 'plaintext'"
+        [class.is-invalid]="isInvalid"
+        [class.just-validate-success-field]="isValid"
+        [formControl]="control"
+        [placeholder]="placeholder"
+        [readonly]="isReadonly"
+        [autocomplete]="autocomplete"
+        [attr.aria-describedby]="id + '-description'"
+        (blur)="markAsTouched()" />
+    }
+
+    <div class="input-group-append">
+      <ng-content select="[append]"></ng-content>
+
+      <div class="input-group-text">
+        <ng-content select="[appendText]"></ng-content>
+      </div>
+    </div>
+  </div>
+
+  @if (description) {
+    <small [id]="id + '-description'" class="form-text">{{ description }}</small>
+  }
+
+  @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/input/input.component.scss

@@ -0,0 +1,29 @@
+.form-group {
+  label {
+    z-index: 1000;
+  }
+
+  input:focus:not(.focus--mouse) {
+    box-shadow: inherit !important;
+    border-color: inherit !important;
+  }
+
+  .input-number {
+    .align-buttons {
+      height: 100%;
+    }
+  }
+
+  .input-group-text:empty {
+    display: none;
+  }
+
+  label.empty-prepend-label {
+    left: auto !important;
+    max-width: 100% !important;
+  }
+
+  label:not(.active):has(+ input:-webkit-autofill) {
+    transform: translateY(-75%);
+  }
+}

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

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