design-angular-kit 1.2.0 → 1.2.1

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

@@ -0,0 +1,234 @@
+import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { ItAbstractFormComponent } from '../../../abstracts/abstract-form.component';
+import { InputControlType } from '../../../interfaces/form';
+import { AbstractControl, ReactiveFormsModule, ValidatorFn, Validators } from '@angular/forms';
+import { ItValidators } from '../../../validators/it-validators';
+import { Observable } from 'rxjs';
+import { AsyncPipe } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { inputToBoolean } from '../../../utils/coercion';
+
+@Component({
+  standalone: true,
+  selector: 'it-input',
+  templateUrl: './input.component.html',
+  styleUrls: ['./input.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [ReactiveFormsModule, TranslateModule, AsyncPipe],
+})
+export class ItInputComponent extends ItAbstractFormComponent<string | number | null | undefined> implements OnInit {
+  /**
+   * The input type
+   * @default text
+   */
+  @Input() type: InputControlType = 'text';
+
+  /**
+   * The input placeholder
+   */
+  @Input() placeholder = '';
+
+  /**
+   * The input description
+   */
+  @Input() description: string | undefined;
+
+  /**
+   * To prevent modification of the contained value.
+   * - <b>plaintext</b>: Readonly field in the form stylized as plain text
+   * @default undefined
+   */
+  @Input() readonly: boolean | 'plaintext' | undefined;
+
+  /**
+   * The max date value [Used only in type = 'date']
+   * @default '9999-12-31'
+   * @example 'yyyy-mm-dd'
+   */
+  @Input() maxDate?: string = '9999-12-31';
+
+  /**
+   * The min date value [Used only in type = 'date']
+   * @example 'yyyy-mm-dd'
+   */
+  @Input() minDate: string | undefined;
+
+  /**
+   * The max value [Used only in type = 'number']
+   */
+  @Input() max: number | undefined;
+
+  /**
+   * The min value [Used only in type = 'number']
+   */
+  @Input() min: number | undefined;
+
+  /**
+   * The step value [Used only in type = 'number']
+   */
+  @Input() step: number | 'any' | undefined;
+
+  /**
+   * If is a currency number [Used only in type = 'number']
+   * @default false
+   */
+  @Input({ transform: inputToBoolean }) currency?: boolean;
+
+  /**
+   * If is a percentage number [Used only in type = 'number']
+   * @default false
+   */
+  @Input({ transform: inputToBoolean }) percentage?: boolean;
+
+  /**
+   * The currency or percentage symbol [Used only if percentage or currency]
+   * @example '$'
+   */
+  @Input() symbol: string | undefined;
+
+  /**
+   * To make the numeric field automatically resize according to the value contained in it. [Used only in type = 'number']
+   * @default false
+   */
+  @Input({ transform: inputToBoolean }) adaptive?: boolean;
+
+  /**
+   * Input autocomplete attribute (Browser autocomplete)
+   * @default undefined
+   */
+  @Input() autocomplete: string | undefined;
+
+  get isActiveLabel(): boolean {
+    const value = this.control.value;
+    if ((!!value && value !== 0) || value === 0 || !!this.placeholder) {
+      return true;
+    }
+
+    // if (this.type === 'number' && (!!this.currency || !!this.percentage)) {
+    //   return true;
+    // }
+
+    return this.type === 'date' || this.type === 'time' || this.type === 'color';
+  }
+
+  /**
+   * Check is readonly field
+   */
+  protected get isReadonly(): boolean {
+    return this.readonly === 'plaintext' || !!this.readonly;
+  }
+
+  /**
+   * Return the invalid message string from TranslateService
+   */
+  override get invalidMessage(): Observable<string> {
+    if (this.hasError('min') && this.min) {
+      return this._translateService.get('it.errors.min-invalid', {
+        min: this.min,
+      });
+    }
+    if (this.hasError('max') && this.max) {
+      return this._translateService.get('it.errors.max-invalid', {
+        max: this.max,
+      });
+    }
+    if (this.hasError('minlength')) {
+      const error = this.getError('minlength');
+      return this._translateService.get('it.errors.min-length-invalid', {
+        min: error.requiredLength,
+      });
+    }
+    if (this.hasError('maxlength')) {
+      const error = this.getError('maxlength');
+      return this._translateService.get('it.errors.max-length-invalid', {
+        max: error.requiredLength,
+      });
+    }
+    if (this.hasError('email') || this.hasError('invalidEmail')) {
+      return this._translateService.get('it.errors.email-invalid');
+    }
+    if (this.hasError('invalidTel')) {
+      return this._translateService.get('it.errors.tel-invalid');
+    }
+    if (this.hasError('invalidUrl')) {
+      return this._translateService.get('it.errors.url-invalid');
+    }
+    if (this.hasError('invalidTaxCode')) {
+      return this._translateService.get('it.errors.tax-code-invalid');
+    }
+    if (this.hasError('invalidVatNumber')) {
+      return this._translateService.get('it.errors.vat-number-invalid');
+    }
+    if (this.hasError('invalidCap')) {
+      return this._translateService.get('it.errors.cap-invalid');
+    }
+    if (this.hasError('invalidIban')) {
+      return this._translateService.get('it.errors.iban-invalid');
+    }
+    if (this.hasError('invalidPlate')) {
+      return this._translateService.get('it.errors.plate-invalid');
+    }
+    if (this.hasError('invalidRegex')) {
+      return this._translateService.get('it.errors.regex-invalid');
+    }
+    if (this.hasError('pattern')) {
+      const error = this.getError('pattern');
+      return this._translateService.get('it.errors.pattern-invalid', {
+        pattern: error.requiredPattern,
+      });
+    }
+
+    return super.invalidMessage;
+  }
+
+  override ngOnInit() {
+    super.ngOnInit();
+
+    const validators: Array<ValidatorFn> = [];
+    switch (this.type) {
+      case 'number':
+        if (this.percentage) {
+          this.min = this.min || 0;
+          this.max = this.max || 100;
+        }
+
+        // Dynamic min/max validators
+        validators.push((control: AbstractControl) => (this.min ? Validators.min(this.min)(control) : null));
+        validators.push((control: AbstractControl) => (this.max ? Validators.max(this.max)(control) : null));
+        break;
+      case 'email':
+        validators.push(ItValidators.email);
+        break;
+      case 'tel':
+        validators.push(ItValidators.tel);
+        break;
+      case 'url':
+        validators.push(ItValidators.url);
+        break;
+    }
+
+    this.addValidators(validators);
+  }
+
+  /**
+   * Increment or decrease the input number value of step
+   * @param decrease true to decrease value
+   */
+  protected incrementNumber(decrease = false): void {
+    if (this.type !== 'number') {
+      return;
+    }
+    const step = this.step === 'any' ? 1 : this.step ?? 1;
+    let value = Number(this.control.value);
+    value = (isNaN(value) ? 0 : value) + (decrease ? -step : step);
+    value = Math.round(value * 1e12) / 1e12; // prevent js decimal error
+
+    if (this.min !== undefined && value < this.min) {
+      value = this.min;
+    } else if (this.max !== undefined && value > this.max) {
+      value = this.max;
+    }
+
+    this.control.setValue(value);
+  }
+}

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

@@ -0,0 +1,65 @@
+<div class="form-group">
+  @if (label) {
+    <label [for]="id" [class.active]="!!control.value || !!placeholder">{{ label }}</label>
+  }
+  <input
+    #input
+    [id]="id"
+    type="password"
+    class="form-control input-password"
+    [class.is-invalid]="isInvalid"
+    [class.is-valid]="isValid"
+    [formControl]="control"
+    [placeholder]="placeholder"
+    [attr.aria-describedby]="id + '-description'"
+    [autocomplete]="confirmPasswordField ? 'off' : autocomplete" />
+
+  <span class="password-icon" aria-hidden="true">
+    <it-icon name="password-visible" size="sm" class="password-icon-visible"></it-icon>
+    <it-icon name="password-invisible" size="sm" class="password-icon-invisible d-none"></it-icon>
+  </span>
+
+  @if (isInvalid) {
+    <div [id]="id + '-error'" class="form-feedback just-validate-error-label">
+      <div #customError>
+        <ng-content select="[error]"></ng-content>
+      </div>
+      @if (!customError.hasChildNodes()) {
+        {{ invalidMessage | async }}
+      }
+    </div>
+  }
+
+  @if (description !== undefined && !isStrengthMeter) {
+    <small [id]="id + '-description'" class="form-text">
+      {{ description !== true ? description : (strengthMeterDescription | async) }}
+    </small>
+  }
+
+  <small class="password-caps form-text text-warning position-absolute bg-white w-100">
+    {{ 'it.form.caps-inserted' | translate }}
+  </small>
+
+  @if (isStrengthMeter) {
+    <div class="password-strength-meter">
+      <small
+        [id]="id + '-description'"
+        class="form-text text-muted"
+        [attr.data-bs-short-pass]="'it.form.password-strength-meter.password-short' | translate"
+        [attr.data-bs-bad-pas]="'it.form.password-strength-meter.password-bad' | translate"
+        [attr.data-bs-good-pass]="'it.form.password-strength-meter.password-good' | translate"
+        [attr.data-bs-strong-pass]="'it.form.password-strength-meter.password-strong' | translate">
+        {{ description !== undefined && description !== true ? description : (strengthMeterDescription | async) }}
+      </small>
+      <div class="password-meter progress rounded-0 position-absolute">
+        <div class="row position-absolute w-100 m-0">
+          <div class="col-3 border-start border-end border-white"></div>
+          <div class="col-3 border-start border-end border-white"></div>
+          <div class="col-3 border-start border-end border-white"></div>
+          <div class="col-3 border-start border-end border-white"></div>
+        </div>
+        <div class="progress-bar bg-muted" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
+      </div>
+    </div>
+  }
+</div>

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

@@ -0,0 +1,9 @@
+.form-group {
+  input:focus:not(.focus--mouse) {
+    box-shadow: inherit !important;
+    border-color: inherit !important;
+  }
+  label:not(.active):has(+ input:-webkit-autofill) {
+    transform: translateY(-75%);
+  }
+}

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

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

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

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

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

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

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

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

@@ -0,0 +1,17 @@
+<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" />