design-angular-kit 1.2.1 → 1.2.2

package/src/lib/components/form/password-input/password-input.component.ts

@@ -1,171 +0,0 @@
-import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
-import { ItAbstractFormComponent } from '../../../abstracts/abstract-form.component';
-import { ItValidators } from '../../../validators/it-validators';
-import { map, Observable } from 'rxjs';
-import { InputPassword } from 'bootstrap-italia';
-import { ReactiveFormsModule, Validators } from '@angular/forms';
-import { AsyncPipe } from '@angular/common';
-import { ItIconComponent } from '../../utils/icon/icon.component';
-import { TranslateModule } from '@ngx-translate/core';
-import { inputToBoolean } from '../../../utils/coercion';
-
-@Component({
-  standalone: true,
-  selector: 'it-password-input',
-  templateUrl: './password-input.component.html',
-  styleUrls: ['./password-input.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [ReactiveFormsModule, ItIconComponent, AsyncPipe, TranslateModule],
-})
-export class ItPasswordInputComponent extends ItAbstractFormComponent<string | null | undefined> implements OnInit, AfterViewInit {
-  /**
-   * The field is required
-   * @default true
-   */
-  @Input() required: boolean = true;
-
-  /**
-   * The password minimum length
-   * @default 10
-   */
-  @Input() minLength: number = 10;
-
-  /**
-   * The password must contain at least one number
-   * @default true
-   */
-  @Input() useNumber: boolean = true;
-
-  /**
-   * The password must contain at least one uppercase character
-   * @default true
-   */
-  @Input() useCapitalCase: boolean = true;
-
-  /**
-   * The password must contain at least one lowercase character
-   * @default true
-   */
-  @Input() useSmallCase: boolean = true;
-
-  /**
-   * The password must contain at least one special character
-   * @default true
-   */
-  @Input() useSpecialCharacters: boolean = true;
-
-  /**
-   * The input placeholder
-   */
-  @Input() placeholder: string = '';
-
-  /**
-   * The input description
-   * - <b>true</b>: show the StrengthMeter description message
-   * - <b>string</b>: show custom description
-   * @default true for StrengthMeter mode else is undefined
-   */
-  @Input() description: string | true | undefined;
-
-  /**
-   * Enable to show the strength meter
-   * @default false
-   */
-  @Input({ transform: inputToBoolean }) showStrengthMeter?: boolean;
-
-  /**
-   * Is the confirmation password field
-   * @default false
-   */
-  @Input({ transform: inputToBoolean }) confirmPasswordField?: boolean;
-
-  /**
-   * Input autocomplete attribute (Browser autocomplete)
-   * @default undefined
-   */
-  @Input() autocomplete: string | undefined;
-
-  private inputPasswordBs?: InputPassword;
-
-  @ViewChild('input') private inputElement?: ElementRef<HTMLInputElement>;
-
-  override ngOnInit() {
-    super.ngOnInit();
-
-    if (!this.confirmPasswordField) {
-      this.addValidators(
-        ItValidators.password(
-          this.minLength,
-          this.useNumber,
-          this.useCapitalCase,
-          this.useSmallCase,
-          this.useSpecialCharacters,
-          this.required
-        )
-      );
-    } else if (this.required) {
-      this.addValidators(Validators.required);
-    }
-  }
-
-  override ngAfterViewInit() {
-    super.ngAfterViewInit();
-
-    if (this.inputElement) {
-      this.inputPasswordBs = InputPassword.getOrCreateInstance(this.inputElement.nativeElement, {
-        showText: this.isStrengthMeter,
-        minimumLength: this.minLength,
-      });
-    }
-  }
-
-  protected get isStrengthMeter(): boolean {
-    return !this.confirmPasswordField && !!this.showStrengthMeter;
-  }
-
-  /**
-   * Return the invalid message string from TranslateService
-   */
-  override get invalidMessage(): Observable<string> {
-    if (this.hasError('noPasswordMatch')) {
-      return this._translateService.get('it.errors.password-no-match');
-    }
-    if (this.hasError('minlength')) {
-      return this._translateService.get('it.errors.password-min-length', {
-        minLength: this.minLength,
-      });
-    }
-    if (this.hasError('hasNumber')) {
-      return this._translateService.get('it.errors.password-number');
-    }
-    if (this.hasError('hasCapitalCase')) {
-      return this._translateService.get('it.errors.password-capital-case');
-    }
-    if (this.hasError('hasSmallCase')) {
-      return this._translateService.get('it.errors.password-capital-case');
-    }
-    if (this.hasError('hasSpecialCharacters')) {
-      return this._translateService.get('it.errors.password-special-character');
-    }
-
-    return super.invalidMessage;
-  }
-
-  /**
-   * Retrieve the default StrengthMeter description message from TranslateService
-   */
-  protected get strengthMeterDescription(): Observable<string> {
-    const keys = ['it.form.password-strength-meter.description.default'];
-    if (this.useNumber) {
-      keys.push('it.form.password-strength-meter.description.number');
-    }
-    if (this.useCapitalCase) {
-      keys.push('it.form.password-strength-meter.description.capital-case');
-    }
-    if (this.useSpecialCharacters) {
-      keys.push('it.form.password-strength-meter.description.special-character');
-    }
-
-    return this._translateService.get(keys, { minLength: this.minLength }).pipe(map(labels => Object.values(labels).join(', ')));
-  }
-}

package/src/lib/components/form/radio-button/radio-button.component.html

@@ -1,50 +0,0 @@
-<ng-container>
-  <div class="form-check" [class.form-check-group]="group" [class.form-check-inline]="inline">
-    <input
-      [id]="id"
-      type="radio"
-      [value]="value"
-      [name]="name"
-      [class.is-invalid]="isInvalid"
-      [class.is-valid]="isValid"
-      [formControl]="control"
-      [attr.aria-describedby]="id + '-help'" />
-
-    <label class="form-check-label" [for]="id">
-      <div #customLabel>
-        <ng-content select="[label]"></ng-content>
-      </div>
-      @if (!customLabel.hasChildNodes()) {
-        {{ label }}
-      }
-    </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'">
-        <div #customError>
-          <ng-content select="[error]"></ng-content>
-        </div>
-        @if (!customError.hasChildNodes()) {
-          {{ invalidMessage | async }}
-        }
-      </div>
-    }
-  </div>
-
-  @if (isInvalid && !group) {
-    <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>
-  }
-</ng-container>

package/src/lib/components/form/radio-button/radio-button.component.scss

@@ -1,14 +0,0 @@
-//@import 'bootstrap-italia/src/scss/functions';
-//@import 'bootstrap-italia/src/scss/utilities/colors_vars';
-//
-//.form-check {
-//
-//  [type=radio].is-invalid:not(:checked) + label::after,
-//  [type=radio].is-invalid:not(:checked) + label::before {
-//    border-color: $danger;
-//  }
-//
-//  [type=radio].is-invalid:not(:checked) + label {
-//    color: $danger;
-//  }
-//}

package/src/lib/components/form/radio-button/radio-button.component.spec.ts

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

package/src/lib/components/form/radio-button/radio-button.component.ts

@@ -1,82 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
-import { ItAbstractFormComponent } from '../../../abstracts/abstract-form.component';
-import { ReactiveFormsModule } from '@angular/forms';
-import { AsyncPipe } from '@angular/common';
-import { inputToBoolean } from '../../../utils/coercion';
-
-@Component({
-  standalone: true,
-  selector: 'it-radio-button',
-  templateUrl: './radio-button.component.html',
-  styleUrls: ['./radio-button.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [ReactiveFormsModule, AsyncPipe],
-})
-export class ItRadioButtonComponent extends ItAbstractFormComponent<string | number | null | undefined> implements OnInit {
-  /**
-   * The radio value
-   */
-  @Input({ required: true }) value: string | number | undefined | null;
-
-  /**
-   * If show radio inline
-   * @default false
-   */
-  @Input({ transform: inputToBoolean }) inline?: boolean;
-
-  /**
-   * If is radio group
-   * @default false
-   */
-  @Input({ transform: inputToBoolean }) group?: boolean;
-
-  /**
-   * If is radio is checked
-   * @default false
-   */
-  @Input({ transform: inputToBoolean }) checked?: boolean;
-
-  /**
-   * Set the radio name manually.
-   * For example when the radio button name is duplicated inside page
-   * @default by default the radio name is calculated from form field name
-   */
-  @Input() forceRadioName?: string;
-
-  get name(): string {
-    if (this.forceRadioName) {
-      return this.forceRadioName;
-    }
-
-    let name = '';
-    if (this._ngControl) {
-      name = this._ngControl.name?.toString() || '';
-
-      // Retrieve parent name, prevent duplicate name inside FormArray or nested FormGroup
-      let control = this._ngControl.control?.parent;
-      while (control?.parent) {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const controls: { [key: string]: any } = control?.parent?.controls || {};
-        const parentName = Object.keys(controls).find(name => control === controls[name]) || null;
-        if (!parentName) {
-          break;
-        }
-        name = `${parentName}.${name}`; // parent.0.radioName
-        control = control.parent;
-      }
-    }
-
-    return name;
-  }
-
-  override ngOnInit() {
-    super.ngOnInit();
-
-    if (this.control.value || !this.value || !this.checked) {
-      return;
-    }
-
-    this.writeValue(this.value);
-    return this.onChange(this.value);
-  }
-}

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

@@ -1,17 +0,0 @@
-<div class="d-flex justify-content-between align-items-center">
-  @if (label) {
-    <label [for]="id" class="form-label">{{ label }}</label>
-  }
-  <ng-content></ng-content>
-</div>
-
-<input
-  #slider
-  [id]="id"
-  type="range"
-  [min]="min"
-  [max]="max"
-  [step]="step"
-  class="form-range"
-  [class.double-color]="!!leftColor && !!rightColor"
-  [formControl]="control" />

package/src/lib/components/form/range/range.component.scss

@@ -1,17 +0,0 @@
-.form-range.double-color {
-  &::-webkit-slider-runnable-track {
-    background: linear-gradient(
-      to right,
-      var(--range-left-color) var(--range-percentage),
-      var(--range-right-color) var(--range-percentage)
-    );
-  }
-
-  &::-moz-range-track {
-    background: linear-gradient(
-      to right,
-      var(--range-left-color) var(--range-percentage),
-      var(--range-right-color) var(--range-percentage)
-    );
-  }
-}

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

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

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

@@ -1,100 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  Input,
-  OnChanges,
-  OnDestroy,
-  OnInit,
-  SimpleChanges,
-  ViewChild,
-} from '@angular/core';
-import { ItAbstractFormComponent } from '../../../abstracts/abstract-form.component';
-import { ReactiveFormsModule } from '@angular/forms';
-import { distinctUntilChanged, startWith, Subscription } from 'rxjs';
-
-@Component({
-  selector: 'it-range',
-  standalone: true,
-  imports: [ReactiveFormsModule],
-  templateUrl: './range.component.html',
-  styleUrls: ['./range.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ItRangeComponent extends ItAbstractFormComponent<number | null | undefined> implements OnInit, OnChanges, OnDestroy {
-  /**
-   * The max value
-   */
-  @Input() max?: number;
-
-  /**
-   * The min value
-   */
-  @Input() min?: number;
-
-  /**
-   * The step value
-   */
-  @Input() step?: number | 'any';
-
-  /**
-   * The color on left of thumb [Require rightColor]
-   * @example '#0d6efd' or 'var(--bs-primary)'
-   * @default undefined ('var(--bs-gray-300)')
-   */
-  @Input() leftColor?: string;
-
-  /**
-   * The color on right of thumb [Require leftColor]
-   * @example '#0d6efd' or 'var(--bs-primary)'
-   * @default undefined ('var(--bs-gray-300)')
-   */
-  @Input() rightColor?: string;
-
-  @ViewChild('slider', { static: true }) slider!: ElementRef<HTMLInputElement>;
-
-  private subscription?: Subscription;
-
-  override ngOnInit() {
-    super.ngOnInit();
-    this.subscription = this.control.valueChanges
-      .pipe(distinctUntilChanged(), startWith(undefined))
-      .subscribe(() => this.updateSliderColor());
-  }
-
-  override ngOnChanges(changes: SimpleChanges) {
-    if (changes['leftColor']) {
-      this.slider.nativeElement.style.setProperty('--range-left-color', this.leftColor ?? null);
-    }
-    if (changes['rightColor']) {
-      this.slider.nativeElement.style.setProperty('--range-right-color', this.rightColor ?? null);
-    }
-  }
-
-  ngOnDestroy() {
-    this.subscription?.unsubscribe();
-  }
-
-  override writeValue(value: number | null | undefined) {
-    super.writeValue(value);
-    this.updateSliderColor();
-  }
-
-  /**
-   * Update the percentage of slider color
-   * @private
-   */
-  private updateSliderColor(): void {
-    if (!this.leftColor || !this.rightColor) {
-      return;
-    }
-
-    const max = Number(this.slider.nativeElement.max) || 100;
-    const min = Number(this.slider.nativeElement.min) || 0;
-
-    // Calculate visible width
-    const diff = max - min;
-    const val = (((this.control.value ?? diff / 2) - min) * 100) / diff;
-    this.slider.nativeElement.style.setProperty('--range-percentage', `${val}%`);
-  }
-}

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

@@ -1,24 +0,0 @@
-<fieldset class="rating" [class.rating-label]="!!label" [class.rating-read-only]="control.disabled">
-  <legend>
-    <span>{{ label }}</span>
-    <span class="visually-hidden">
-      {{ 'it.core.rating-star' | translate: { current: control.value || 0, total: stars.length } }}
-    </span>
-  </legend>
-
-  @for (starValue of stars; track starValue) {
-    <input
-      [id]="id + '-' + starValue"
-      type="radio"
-      [name]="id"
-      [value]="starValue"
-      [attr.aria-hidden]="control.disabled"
-      [formControl]="control" />
-    <label class="full" [for]="id + '-' + starValue">
-      <it-icon name="star-full" size="sm" aria-hidden="true"></it-icon>
-      <span class="visually-hidden">
-        {{ 'it.core.rate-star' | translate: { current: starValue, total: stars.length } }}
-      </span>
-    </label>
-  }
-</fieldset>

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

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

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

@@ -1,52 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
-import { ItAbstractFormComponent } from '../../../abstracts/abstract-form.component';
-import { TranslateModule } from '@ngx-translate/core';
-import { ReactiveFormsModule } from '@angular/forms';
-import { ItIconComponent } from '../../utils/icon/icon.component';
-
-@Component({
-  standalone: true,
-  selector: 'it-rating',
-  templateUrl: './rating.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [TranslateModule, ReactiveFormsModule, ItIconComponent],
-})
-export class ItRatingComponent extends ItAbstractFormComponent<number | null | undefined> implements OnInit, OnChanges {
-  /**
-   * The rating value
-   */
-  @Input() value: number | undefined;
-
-  /**
-   * Number of stars to show
-   * @default 5
-   */
-  @Input() starCount: number = 5;
-
-  protected stars: Array<number> = this.generateStars();
-
-  override ngOnChanges(changes: SimpleChanges): void {
-    super.ngOnChanges(changes);
-
-    if (changes['starCount'] || !this.stars.length) {
-      this.stars = this.generateStars();
-    }
-  }
-
-  override ngOnInit() {
-    super.ngOnInit();
-
-    if (!this.control.value && !!this.value) {
-      this.writeValue(this.value);
-      this.onChange(this.value);
-    }
-  }
-
-  /**
-   * Generate the array of stars
-   * @private
-   */
-  private generateStars(): Array<number> {
-    return Array.from({ length: this.starCount }, (_, i) => i + 1).reverse();
-  }
-}

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

@@ -1,54 +0,0 @@
-<div class="select-wrapper">
-  @if (label) {
-    <label [for]="id">{{ label }}</label>
-  }
-  <select
-    [id]="id"
-    [formControl]="control"
-    [class.is-invalid]="isInvalid"
-    [class.is-valid]="isValid"
-    (blur)="markAsTouched()"
-    [attr.aria-describedby]="id + '-description'">
-    @if (defaultOption) {
-      <option [ngValue]="null" disabled selected>
-        {{ defaultOption }}
-      </option>
-    }
-
-    <ng-content></ng-content>
-
-    @if (options) {
-      @for (option of options; track option.value) {
-        <option [disabled]="optionIsDisabled(option)" [ngValue]="option.value">
-          {{ option.text ?? option.value }}
-        </option>
-      }
-    }
-
-    @if (groups) {
-      @for (group of groups; track group) {
-        <optgroup [label]="group.label">
-          @for (option of group.options; track option.value) {
-            <option [disabled]="optionIsDisabled(option)" [ngValue]="option.value">
-              {{ option.text ?? option.value }}
-            </option>
-          }
-        </optgroup>
-      }
-    }
-  </select>
-  @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/select/select.component.scss

@@ -1,3 +0,0 @@
-.select-wrapper {
-  margin-bottom: 1.7rem;
-}

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

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