design-angular-kit 1.2.1 → 1.2.2

package/src/lib/abstracts/abstract-form.component.ts

@@ -1,200 +0,0 @@
-import { ControlValueAccessor, FormControl, NgControl, ValidatorFn } from '@angular/forms';
-import { Component, DoCheck, Input, OnInit, Optional, Self } from '@angular/core';
-import { ItAbstractComponent } from './abstract.component';
-import { Observable } from 'rxjs';
-import { TranslateService } from '@ngx-translate/core';
-import { inputToBoolean } from '../utils/coercion';
-
-@Component({ template: '' })
-export abstract class ItAbstractFormComponent<T = any> extends ItAbstractComponent implements OnInit, ControlValueAccessor, DoCheck {
-  /**
-   * The label of form control
-   */
-  @Input() label?: string;
-
-  /**
-   * Validation color display mode (validation triggered if field is touched or not pristine)
-   * - <b>true</b>: Always show the validation color
-   * - <b>false</b>: Never show validation color
-   * - <b>only-valid</b>: Show only valid validation color
-   * - <b>only-invalid</b>: Show only invalid validation color
-   * @default <b>true</b>: Always show the validation color
-   */
-  @Input() validationMode: boolean | 'only-valid' | 'only-invalid' = true;
-
-  /**
-   * Set the disabled state
-   */
-  @Input({ transform: inputToBoolean }) set disabled(isDisabled: boolean) {
-    this.setDisabledState(isDisabled);
-  }
-
-  /**
-   * Internal form control
-   */
-  protected control: FormControl<T>;
-
-  constructor(
-    protected readonly _translateService: TranslateService,
-    @Self() @Optional() protected readonly _ngControl: NgControl
-  ) {
-    super();
-    this.control = new FormControl();
-    this._ngControl && (this._ngControl.valueAccessor = this);
-  }
-
-  /**
-   * Check if field is invalid (Validation failed)
-   */
-  get isInvalid(): boolean | undefined {
-    if (this.validationMode === 'only-valid' || (this.validationMode !== 'only-invalid' && !this.validationMode)) {
-      return undefined;
-    }
-
-    if (this._ngControl) {
-      return this._ngControl.invalid === true && (!this._ngControl.pristine || this._ngControl.touched === true);
-    }
-    return this.control.invalid && (!this.control.pristine || this.control.touched);
-  }
-
-  /**
-   * Check if field is valid (Validation successful)
-   */
-  get isValid(): boolean | undefined {
-    if (this.validationMode === 'only-invalid' || (this.validationMode !== 'only-valid' && !this.validationMode)) {
-      return undefined;
-    }
-
-    if (this._ngControl) {
-      return this._ngControl.valid === true && (!this._ngControl.pristine || this._ngControl.touched === true);
-    }
-    return this.control.valid && (!this.control.pristine || this.control.touched);
-  }
-
-  /**
-   * Return the invalid message string from TranslateService
-   */
-  get invalidMessage(): Observable<string> {
-    if (this.hasError('required')) {
-      return this._translateService.get('it.errors.required-field');
-    }
-
-    return this._translateService.get('it.errors.invalid-field');
-  }
-
-  ngOnInit(): void {
-    if (this._ngControl?.control) {
-      this.control.setValidators((this._ngControl.control as FormControl).validator);
-    }
-  }
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  onChange = (_: T) => {};
-
-  onTouched = () => {};
-
-  registerOnChange(fn: any): void {
-    this.control.valueChanges.subscribe(fn);
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: any): void {
-    this.onTouched = fn;
-  }
-
-  setDisabledState(isDisabled: boolean): void {
-    if (isDisabled) {
-      return this.control.disable();
-    }
-    this.control.enable();
-  }
-
-  writeValue(value: T): void {
-    this.control.setValue(value, { emitEvent: false });
-    this._changeDetectorRef.detectChanges();
-  }
-
-  /**
-   * Mark the control as touched
-   */
-  markAsTouched(): void {
-    if (!this.control.touched) {
-      this.onTouched();
-    }
-  }
-
-  /**
-   * Fired to check if form control is touched
-   */
-  ngDoCheck() {
-    if (this._ngControl?.control) {
-      const ngControl = this._ngControl.control;
-      if (this.control.touched !== ngControl.touched) {
-        if (ngControl.touched) {
-          this.control.markAsTouched();
-        } else {
-          this.control.markAsUntouched();
-        }
-      }
-      if (this.control.pristine !== ngControl.pristine) {
-        if (ngControl.pristine) {
-          this.control.markAsPristine();
-        } else {
-          this.control.markAsDirty();
-        }
-      }
-    }
-    this._changeDetectorRef.detectChanges();
-  }
-
-  /**
-   * Add the validators in control and parent control
-   * @param validators the validators
-   * @protected
-   */
-  protected addValidators(validators: ValidatorFn | ValidatorFn[]): void {
-    if (!Array.isArray(validators)) {
-      validators = [validators];
-    }
-
-    validators.forEach(validator => {
-      if (!this.control.hasValidator(validator)) {
-        this.control.addValidators(validator);
-      }
-
-      if (this._ngControl?.control && !this._ngControl.control.hasValidator(validator)) {
-        this._ngControl.control.addValidators(validator);
-      }
-    });
-  }
-
-  /**
-   * Reports whether the control with the given path has the error specified. <br/>
-   * If the control is not present, false is returned.
-   * @param errorCode The code of the error to check
-   * @param path A list of control names that designates how to move from the current control
-   * to the control that should be queried for errors.
-   * @returns whether the given error is present in the control at the given path.
-   */
-  public hasError(errorCode: string, path?: Array<string | number> | string): boolean {
-    if (this._ngControl) {
-      return this._ngControl.hasError(errorCode, path);
-    }
-    return this.control.hasError(errorCode, path);
-  }
-
-  /**
-   * Reports error data for the control with the given path.
-   * @param errorCode The code of the error to check
-   * @param path A list of control names that designates how to move from the current control
-   * to the control that should be queried for errors.
-   * @returns error data for that particular error. If the control or error is not present,
-   * null is returned.
-   */
-  public getError(errorCode: string, path?: Array<string | number> | string): any {
-    if (this._ngControl) {
-      return this._ngControl.getError(errorCode, path);
-    }
-    return this.control.getError(errorCode, path);
-  }
-}

package/src/lib/abstracts/abstract.component.ts

@@ -1,63 +0,0 @@
-import {
-  AfterViewInit,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  EventEmitter,
-  inject,
-  Input,
-  OnChanges,
-  Output,
-  Renderer2,
-  SimpleChanges,
-} from '@angular/core';
-
-@Component({ template: '' })
-export abstract class ItAbstractComponent implements AfterViewInit, OnChanges {
-  /**
-   * The element ID
-   */
-  @Input() id: string = this.getDefaultId();
-
-  /**
-   * Fired when component input attributes was changed
-   */
-  @Output() public valueChanges: EventEmitter<void>;
-
-  /**
-   * Counter of active instances
-   * @private
-   */
-  private static instances = 0;
-
-  protected readonly _renderer: Renderer2; // Injected
-  protected readonly _elementRef: ElementRef; // Injected
-  protected readonly _changeDetectorRef: ChangeDetectorRef; // Injected
-
-  constructor() {
-    this._renderer = inject(Renderer2);
-    this._elementRef = inject(ElementRef);
-    this._changeDetectorRef = inject(ChangeDetectorRef);
-
-    this.valueChanges = new EventEmitter<void>();
-  }
-
-  ngAfterViewInit(): void {
-    this._renderer.removeAttribute(this._elementRef.nativeElement, 'id');
-  }
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  ngOnChanges(changes: SimpleChanges): void {
-    this.valueChanges.next(); // The inputs were changed
-  }
-
-  /**
-   * Generate unique id for components
-   * @private
-   */
-  private getDefaultId(): string {
-    const name = this.constructor.name.replace('Component', '');
-    const kebabName = name.replace(/[A-Z]+(?![a-z])|[A-Z]/g, ($, ofs) => (ofs ? '-' : '') + $.toLowerCase());
-    return `${kebabName}-${ItAbstractComponent.instances++}`;
-  }
-}

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

@@ -1,27 +0,0 @@
-<div class="accordion">
-  <div class="accordion-item">
-    <h2 class="accordion-header" id="collapse-{{ id }}-heading">
-      <button
-        class="accordion-button"
-        type="button"
-        data-bs-toggle="collapse"
-        [class.collapsed]="isCollapsed"
-        [attr.data-bs-target]="'#collapse-' + id"
-        [attr.aria-controls]="'collapse-' + id"
-        [attr.aria-expanded]="opened ? 'true' : 'false'">
-        {{ title }}
-      </button>
-    </h2>
-
-    <div
-      #collapse
-      id="collapse-{{ id }}"
-      role="region"
-      class="accordion-collapse collapse {{ class }}"
-      [attr.aria-labelledby]="'collapse-' + id + '-heading'">
-      <div class="accordion-body">
-        <ng-content></ng-content>
-      </div>
-    </div>
-  </div>
-</div>

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

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

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

@@ -1,40 +0,0 @@
-import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, Input, ViewChild } from '@angular/core';
-import { ItCollapseComponent } from '../collapse/collapse.component';
-
-/**
- * Accordion
- * @description Build vertically collapsible accordions based on Collapse.
- */
-@Component({
-  standalone: true,
-  selector: 'it-accordion',
-  templateUrl: './accordion.component.html',
-  exportAs: 'itAccordion',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [],
-})
-export class ItAccordionComponent extends ItCollapseComponent implements AfterViewInit {
-  /**
-   * Accordion Title
-   */
-  @Input({ required: true }) title!: string;
-
-  @ViewChild('collapse') protected override collapseDiv?: ElementRef<HTMLDivElement>;
-
-  protected isCollapsed: boolean = true;
-
-  override ngAfterViewInit(): void {
-    super.ngAfterViewInit();
-    this._renderer.removeAttribute(this._elementRef.nativeElement, 'title');
-
-    this.isCollapsed = !this.opened;
-    this.hideEvent.subscribe(() => {
-      this.isCollapsed = true;
-      this._changeDetectorRef.detectChanges();
-    });
-    this.showEvent.subscribe(() => {
-      this.isCollapsed = false;
-      this._changeDetectorRef.detectChanges();
-    });
-  }
-}

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

@@ -1,19 +0,0 @@
-<div
-  #alertElement
-  class="alert alert-{{ color }}"
-  [class.alert-dismissible]="dismissible"
-  [class.fade]="dismissible"
-  [class.show]="dismissible"
-  role="alert">
-  <h4 class="alert-heading">
-    <ng-content select="[heading]"></ng-content>
-  </h4>
-
-  <ng-content></ng-content>
-
-  @if (dismissible) {
-    <button type="button" class="btn-close" data-bs-dismiss="alert" [attr.aria-label]="'it.core.close-alert' | translate">
-      <it-icon name="close"></it-icon>
-    </button>
-  }
-</div>

package/src/lib/components/core/alert/alert.component.scss

@@ -1,3 +0,0 @@
-.alert-heading:empty {
-  display: none;
-}

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

@@ -1,62 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ItAlertComponent } from './alert.component';
-import { By } from '@angular/platform-browser';
-import { Component, Input } from '@angular/core';
-import { AlertColor } from '../../../interfaces/core';
-
-@Component({
-  selector: 'it-unit-test',
-  template: ` <it-alert [color]="selectedColor" [dismissible]="isDismissible"> Questo è un alert di tipo "<b>primary</b>". </it-alert> `,
-})
-class UnitTestComponent {
-  @Input() set selectedColor(value: AlertColor | undefined) {
-    this._selectedColor = value;
-  }
-  get selectedColor(): AlertColor | undefined {
-    return this._selectedColor;
-  }
-  private _selectedColor: AlertColor | undefined = undefined;
-
-  @Input() set isDismissible(value: boolean) {
-    this._dismissible = value;
-  }
-  get isDismissible(): boolean {
-    return this._dismissible;
-  }
-
-  private _dismissible: boolean = false;
-}
-
-let component: UnitTestComponent;
-let fixture: ComponentFixture<UnitTestComponent>;
-describe('ItAlertComponent', () => {
-  beforeEach(async () => {
-    TestBed.configureTestingModule({
-      declarations: [UnitTestComponent],
-      imports: [ItAlertComponent],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(UnitTestComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('Dovrebbe avere colore primary', () => {
-    component.selectedColor = 'primary';
-    fixture.detectChanges();
-    const spanElement = fixture.debugElement.query(By.css('div.alert.alert-primary'));
-    expect(spanElement).toBeTruthy();
-  });
-
-  it('Dovrebbe avere colore success', () => {
-    component.selectedColor = 'success';
-    fixture.detectChanges();
-    const spanElement = fixture.debugElement.query(By.css('div.alert.alert-success'));
-    expect(spanElement).toBeTruthy();
-  });
-});

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

@@ -1,75 +0,0 @@
-import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
-import { AlertColor } from '../../../interfaces/core';
-import { ItAbstractComponent } from '../../../abstracts/abstract.component';
-import { Alert } from 'bootstrap-italia';
-import { TranslateModule } from '@ngx-translate/core';
-import { ItIconComponent } from '../../utils/icon/icon.component';
-import { inputToBoolean } from '../../../utils/coercion';
-
-/**
- * Alert
- * @description You can provide feedback to the user via alert messages.
- */
-@Component({
-  standalone: true,
-  selector: 'it-alert',
-  templateUrl: './alert.component.html',
-  styleUrls: ['./alert.component.scss'],
-  exportAs: 'itAlert',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [TranslateModule, ItIconComponent],
-})
-export class ItAlertComponent extends ItAbstractComponent implements AfterViewInit {
-  /**
-   * The alert color
-   * @default info
-   */
-  @Input() color: AlertColor = 'info';
-
-  /**
-   * Inserts the close button
-   * @default false
-   */
-  @Input({ transform: inputToBoolean }) dismissible?: boolean;
-
-  /**
-   * This event fires immediately when the instance's close method is called.
-   */
-  @Output() public closeEvent: EventEmitter<Event> = new EventEmitter();
-
-  /**
-   * This event fires when the alert has been closed (it will wait for CSS transitions to complete).
-   */
-  @Output() public closedEvent: EventEmitter<Event> = new EventEmitter();
-
-  private alert?: Alert;
-
-  @ViewChild('alertElement') private alertElement?: ElementRef<HTMLDivElement>;
-
-  override ngAfterViewInit() {
-    super.ngAfterViewInit();
-
-    if (this.alertElement) {
-      const element = this.alertElement.nativeElement;
-      this.alert = Alert.getOrCreateInstance(element);
-
-      element.addEventListener('close.bs.alert', event => this.closeEvent.emit(event));
-      element.addEventListener('closed.bs.alert', event => this.closedEvent.emit(event));
-    }
-  }
-
-  /**
-   * Close an alert by removing it from the DOM.
-   * If the `.fade` and `.show` classes are present in the element, the alert will be closed with a disappearing effect.
-   */
-  public close(): void {
-    this.alert?.close();
-  }
-
-  /**
-   * The alert is removed
-   */
-  public dispose(): void {
-    this.alert?.dispose();
-  }
-}

package/src/lib/components/core/avatar/avatar-dropdown/avatar-dropdown.component.html

@@ -1,23 +0,0 @@
-<it-dropdown id="dropdown" class="dropdown">
-  <ng-content button select="[it-avatar-dropdown-toggle]"></ng-content>
-  <ng-container list class="dropdown-menu">
-    @for (item of items; track item) {
-      <li>
-        @if (item.link) {
-          <a
-            [routerLink]="item.link"
-            class="dropdown-item list-item"
-            title="item.title"
-            accesskey="item.accesskey"
-            tabindex="item.tabindex">
-            <ng-template *ngTemplateOutlet="item._implicitContent"></ng-template>
-          </a>
-        } @else {
-          <div class="dropdown-item list-item">
-            <ng-template *ngTemplateOutlet="item._implicitContent"></ng-template>
-          </div>
-        }
-      </li>
-    }
-  </ng-container>
-</it-dropdown>

package/src/lib/components/core/avatar/avatar-dropdown/avatar-dropdown.component.scss

@@ -1,17 +0,0 @@
-// made because of bug with before triangle that goes up
-.link-list-wrapper {
-  z-index: 2;
-  position: relative;
-}
-
-a {
-  cursor: pointer;
-}
-
-:host ::ng-deep .dropdown-toggle {
-  width: 100%;
-  height: 100%;
-  .icon {
-    display: none;
-  }
-}

package/src/lib/components/core/avatar/avatar-dropdown/avatar-dropdown.component.spec.ts

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

package/src/lib/components/core/avatar/avatar-dropdown/avatar-dropdown.component.ts

@@ -1,50 +0,0 @@
-import { Component, ContentChildren, HostBinding, Input, QueryList, TemplateRef, ViewChild } from '@angular/core';
-import { ItDropdownModule } from '../../dropdown/dropdown.module';
-import { NgTemplateOutlet } from '@angular/common';
-import { RouterLink } from '@angular/router';
-
-@Component({
-  standalone: true,
-  selector: 'it-avatar-dropdown-item',
-  template: '<ng-template><ng-content></ng-content></ng-template>',
-  styleUrls: ['./avatar-dropdown.component.scss'],
-  imports: [NgTemplateOutlet],
-})
-export class ItAvatarDropdownItemComponent {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  @ViewChild(TemplateRef, { static: true }) _implicitContent!: TemplateRef<any>;
-
-  /**
-   * Indica il link che possiamo passare all'elemento
-   */
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  @Input() link: string | any[] | null | undefined;
-
-  /**
-   * Permette di utilizzare l'attributo html title
-   */
-  @Input() title?: string;
-
-  /**
-   * Permette di utilizzare l'attributo html accesskey
-   */
-  @Input() accesskey?: string;
-
-  /**
-   * Permette di utilizzare l'attributo html tabindex
-   */
-  @Input() tabindex?: number;
-}
-
-@Component({
-  standalone: true,
-  selector: 'it-avatar-dropdown',
-  templateUrl: './avatar-dropdown.component.html',
-  styleUrls: ['./avatar-dropdown.component.scss'],
-  imports: [ItDropdownModule, NgTemplateOutlet, RouterLink],
-})
-export class ItAvatarDropdownComponent {
-  @HostBinding('class') componentClass = 'avatar avatar-dropdown';
-
-  @ContentChildren(ItAvatarDropdownItemComponent) items!: QueryList<ItAvatarDropdownItemComponent>;
-}

package/src/lib/components/core/avatar/avatar-group/avatar-group.component.html

@@ -1,7 +0,0 @@
-<ul [class]="linkList ? 'link-list avatar-group' : 'avatar-group-stacked'">
-  @for (avatar of avatars; track avatar) {
-    <li>
-      <ng-container *ngTemplateOutlet="avatar._implicitContent"></ng-container>
-    </li>
-  }
-</ul>

package/src/lib/components/core/avatar/avatar-group/avatar-group.component.spec.ts

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