design-angular-kit 1.2.0 → 1.2.1

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,91 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { ItAbstractFormComponent } from '../../../abstracts/abstract-form.component';
+import { SelectControlGroup, SelectControlOption } from '../../../interfaces/form';
+import { AsyncPipe } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
+
+@Component({
+  standalone: true,
+  selector: 'it-select',
+  templateUrl: './select.component.html',
+  styleUrls: ['./select.component.scss'],
+  imports: [ReactiveFormsModule, AsyncPipe],
+})
+export class ItSelectComponent extends ItAbstractFormComponent implements OnInit {
+  /**
+   * The select options
+   */
+  @Input() options: Array<SelectControlOption> | undefined;
+
+  /**
+   * The select group options
+   */
+  @Input() groups: Array<SelectControlGroup> | undefined;
+
+  /**
+   * The select description
+   */
+  @Input() description?: string;
+
+  /**
+   * If set, add a `disabled selected` option with value `null` and as text the value of the attribute
+   * @example 'Select an option'
+   */
+  @Input() defaultOption?: string;
+
+  override ngOnInit() {
+    super.ngOnInit();
+
+    if (this.control.value) {
+      return;
+    }
+    const selectedOption = this.options?.find(this.optionIsSelected);
+    if (selectedOption) {
+      this.writeValue(selectedOption.value);
+      if (this._ngControl?.control && selectedOption.value !== this._ngControl.control.value) {
+        this.onChange(selectedOption.value);
+      }
+      return;
+    }
+
+    const selectedGroupOption = this.groups?.flatMap(g => g.options).find(this.optionIsSelected);
+    if (selectedGroupOption) {
+      this.writeValue(selectedGroupOption.value);
+      if (this._ngControl?.control && selectedGroupOption.value !== this._ngControl.control.value) {
+        this.onChange(selectedGroupOption.value);
+      }
+    }
+  }
+
+  /**
+   * Check if the option is selected
+   * @param option the option
+   */
+  optionIsSelected(option: SelectControlOption): boolean {
+    if (option.selected === true) {
+      return true;
+    }
+
+    if (typeof option.selected === 'function') {
+      return option.selected(this.control.value);
+    }
+
+    return false;
+  }
+
+  /**
+   * Check if the option is disabled
+   * @param option the option
+   */
+  optionIsDisabled(option: SelectControlOption): boolean {
+    if (option.disabled === true) {
+      return true;
+    }
+
+    if (typeof option.disabled === 'function') {
+      return option.disabled(this.control.value);
+    }
+
+    return false;
+  }
+}

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

@@ -0,0 +1,28 @@
+<div class="form-group">
+  @if (label) {
+    <label [for]="id" [class.active]="!!control.value || !!placeholder">{{ label }}</label>
+  }
+  <textarea
+    [id]="id"
+    [rows]="rows"
+    [class.form-control]="readonly !== 'plaintext'"
+    [class.form-control-plaintext]="readonly === 'plaintext'"
+    [class.is-invalid]="isInvalid"
+    [class.is-valid]="isValid"
+    [placeholder]="placeholder"
+    [formControl]="control"
+    [readonly]="isReadonly"
+    (blur)="markAsTouched()"></textarea>
+
+  @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/textarea/textarea.component.scss

@@ -0,0 +1,12 @@
+@import 'bootstrap-italia/src/scss/base/functions';
+@import 'bootstrap-italia/src/scss/base/variables';
+
+textarea {
+  &.is-invalid {
+    border-color: $danger;
+  }
+
+  //&.is-valid {
+  //  border-color: $success;
+  //}
+}

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

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

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

@@ -0,0 +1,61 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ItAbstractFormComponent } from '../../../abstracts/abstract-form.component';
+import { Observable } from 'rxjs';
+import { AsyncPipe } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
+
+@Component({
+  standalone: true,
+  selector: 'it-textarea',
+  templateUrl: './textarea.component.html',
+  styleUrls: ['./textarea.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [ReactiveFormsModule, AsyncPipe],
+})
+export class ItTextareaComponent extends ItAbstractFormComponent<string | null | undefined> {
+  /**
+   * Textarea Rows
+   * @default 3
+   */
+  @Input() rows?: number = 3;
+
+  /**
+   * The textarea placeholder
+   */
+  @Input() placeholder: string = '';
+
+  /**
+   * 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;
+
+  /**
+   * Return the invalid message string from TranslateService
+   */
+  override get invalidMessage(): Observable<string> {
+    if (this.hasError('maxlength')) {
+      const error = this.getError('maxlength');
+      return this._translateService.get('it.errors.max-length-invalid', { max: error.requiredLength });
+    }
+    if (this.hasError('pattern')) {
+      const error = this.getError('pattern');
+      return this._translateService.get('it.errors.pattern-invalid', { pattern: error.requiredPattern });
+    }
+
+    return super.invalidMessage;
+  }
+
+  /**
+   * Check is readonly field
+   */
+  protected get isReadonly(): boolean {
+    return this.readonly === 'plaintext' || !!this.readonly;
+  }
+}