@tacdaed/fragments 1.0.0-beta.0 → 1.0.0-beta.2

package/src/lib/components/input/input-clock-picker/input-clock-picker.component.ts

@@ -0,0 +1,178 @@
+import { AsyncPipe } from '@angular/common';
+import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import { TimeFormat } from '../../../types/common.types';
+import { calculateHourDegree, calculateMinuteDegree, isMeridiemFormat } from '../../../utils/date.utils';
+import { InputTimeMeridiem } from '../input-type';
+
+@Component({
+  selector: 'frg-input-clock-picker',
+  imports: [AsyncPipe],
+  templateUrl: './input-clock-picker.component.html',
+  styleUrls: ['./input-clock-picker.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class InputClockPickerComponent implements OnInit {
+  /**Selected hour in string format ("00".."23") */
+  @Input() selectedHour: string | null = null;
+
+  /** Selected minute in string format ("00".."55" step 5) */
+  @Input() selectedMinute: string | null = null;
+
+  /** Selected meridiem for 12-hour format */
+  @Input() selectedMeridiem: InputTimeMeridiem = 'AM';
+
+  /** Time format configuration */
+  @Input() timeFormat: TimeFormat | null = null;
+
+  /** Emits the hour when user selects an hour */
+  @Output() selectHour: EventEmitter<string> = new EventEmitter<string>();
+
+  /** Emits the minute when user selects a minute */
+  @Output() selectMinute: EventEmitter<string> = new EventEmitter<string>();
+
+  /** Emits the meridiem when user toggles AM/PM */
+  @Output() selectMeridiem: EventEmitter<InputTimeMeridiem> = new EventEmitter<InputTimeMeridiem>();
+
+  /** Emits when the picker should be closed */
+  @Output() closePicker: EventEmitter<void> = new EventEmitter<void>();
+
+  /** Reference to the minute hand element */
+  @ViewChild('handMinutes', { static: true }) handMinutes!: ElementRef<HTMLDivElement>;
+
+  /** Reference to the hour hand element */
+  @ViewChild('handHours', { static: true }) handHours!: ElementRef<HTMLDivElement>;
+
+  /** Whether the minutes picker is visible */
+  public showMinutesPicker$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+
+  /** Whether the hours picker is visible */
+  public showHoursPicker$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(true);
+
+  private currentHourDegree: number | null = null;
+  private currentMinuteDegree: number | null = null;
+
+  public clockHours: Array<string> = Array.from({ length: 12 }, (_, i) => i.toString().padStart(2, '0'));
+  public fullClockHours: Array<string> = Array.from({ length: 12 }, (_, i) => (i + 12).toString().padStart(2, '0'));
+  public clockMinutes: Array<string> = Array.from({length: 12}, (_, i) => (i * 5).toString().padStart(2,'0'));
+
+  /** Returns the current time in HH:MM format */
+  public get timeValue(): string {
+    return `${this.selectedHour}:${this.selectedMinute}`;
+  }
+
+  /** Returns true if the time format is 12-hour */
+  protected get isMeridiemFormat(): boolean {
+    return isMeridiemFormat(this.timeFormat);
+  }
+
+  /**
+   * Initializes the hour and minute hands based on provided input values.
+   */
+  ngOnInit(): void {
+    if (this.selectedHour) {
+      this.currentHourDegree = calculateHourDegree(this.selectedHour);
+      this.handHours.nativeElement.style.setProperty('--angle', `${this.currentHourDegree}deg`);
+    }
+    if (this.selectedMinute) {
+      this.currentMinuteDegree = calculateMinuteDegree(this.selectedMinute);
+      this.handMinutes.nativeElement.style.setProperty('--angle', `${this.currentMinuteDegree}deg`);
+    }
+  }
+
+  /**
+   * Updates the hour hand to follow hover position.
+   * @param hour - The hour string being hovered ("00".."23").
+   */
+  protected onHourHover(hour: string): void {
+    const angle = calculateHourDegree(hour);
+    this.handHours.nativeElement.style.setProperty('--angle', `${angle}deg`);
+  }
+
+  /**
+   * Resets the hour hand to the currently selected hour when hover leaves.
+   */
+  protected onHourLeave(): void {
+    if (this.currentHourDegree) {
+      this.handHours.nativeElement.style.setProperty('--angle', `${this.currentHourDegree}deg`);
+    } else {
+      this.handHours.nativeElement.style.removeProperty('--angle');
+    }
+  }
+
+  /**
+   * Handles user selection of an hour.
+   * @param event - The pointer event triggered by click.
+   * @param hour - The selected hour string ("00".."23").
+   */
+  protected onHourClick(event: PointerEvent, hour: string): void {
+    event.stopPropagation();
+    this.currentHourDegree = calculateHourDegree(hour);
+
+    this.selectedHour = hour;
+    this.selectHour.emit(hour);
+    this.showHoursPicker$.next(false);
+    this.showMinutesPicker$.next(true);
+
+    this.handHours.nativeElement.style.setProperty('--angle', `${this.currentHourDegree}deg`);
+  }
+
+  /**
+   * Handles AM/PM toggle for 12-hour format.
+   * @param event - The change event from the checkbox input.
+   */
+  protected onMeridiemChange(event: Event): void {
+    event.stopPropagation();
+    const target = event.target as HTMLInputElement;
+    this.selectedMeridiem = target.checked ? 'PM' : 'AM';
+    this.selectMeridiem.emit(this.selectedMeridiem);
+  }
+
+  /**
+   * Updates the minute hand to follow hover position.
+   * @param minute - The minute string being hovered ("00".."55", step 5).
+   */
+  protected onMinuteHover(minute: string): void {
+    const angle = calculateMinuteDegree(minute);
+    this.handMinutes.nativeElement.style.setProperty('--angle', `${angle}deg`);
+  }
+
+  /**
+   * Resets the minute hand to the currently selected minute when hover leaves.
+   */
+  protected onMinuteLeave(): void {
+    if (this.currentMinuteDegree) {
+      this.handMinutes.nativeElement.style.setProperty('--angle', `${this.currentMinuteDegree}deg`);
+    } else {
+      this.handMinutes.nativeElement.style.removeProperty('--angle');
+    }
+  }
+
+  /**
+   * Handles user selection of a minute.
+   * @param event - The pointer event triggered by click.
+   * @param minute - The selected minute string ("00".."55", step 5).
+   */
+  protected onMinuteClick(event: PointerEvent, minute: string): void {
+    event.stopPropagation();
+    this.currentMinuteDegree = calculateMinuteDegree(minute);
+
+    this.selectedMinute = minute;
+    this.selectMinute.emit(minute);
+    this.showHoursPicker$.next(false);
+    this.showMinutesPicker$.next(true);
+
+    this.handMinutes.nativeElement.style.setProperty('--angle', `${this.currentMinuteDegree}deg`);
+    this.closePicker.emit();
+  }
+
+  protected showHours(): void {
+    this.showHoursPicker$.next(true);
+    this.showMinutesPicker$.next(false);
+  }
+
+  protected showMinutes(): void {
+    this.showHoursPicker$.next(false);
+    this.showMinutesPicker$.next(true);
+  }
+}

package/src/lib/components/input/input-consts.ts

@@ -0,0 +1,132 @@
+//#region [ERRORS]
+export const DEFAULT_INPUT_TEXT_ERROR_MESSAGES: Record<string, string> = {
+  required: 'This field is required.',
+  minlength: 'The value is too short.',
+  maxlength: 'The value is too long.',
+  pattern: 'The value does not match the required pattern.',
+  email: 'Please enter a valid email.',
+  strictEmail: 'Please enter a valid email. Format should be example@mail.com',
+  phone: 'Please enter a valid phone number.',
+  strictPhone: 'Please enter a valid phone number. Format should be +1234567890',
+  url: 'Please enter a url',
+  strictUrl: 'Please enter a valid url. Format should be https://www.google.it',
+};
+
+export const DEFAULT_INPUT_NUMBER_ERROR_MESSAGES: Record<string, string> = {
+  required: 'This field is required.',
+  min:'The value is less than minimum allowed',
+  max: 'The value is greather than maximum allowed',
+  step: 'The value does not match the required step increment value',
+  precision: 'The value exceeds the allowed number of decimal places value',
+};
+
+export const DEFAULT_INPUT_DATE_ERROR_MESSAGES: Record<string, string> = {
+  required: 'This field is required.',
+  min: 'The date is before the minimum allowed date: {{date}}',
+  max: 'The date is after the maximum allowed date: {{date}}',
+};
+
+export const DEFAULT_INPUT_TIME_ERROR_MESSAGES: Record<string, string> = {
+  required: 'This field is required.',
+  min: 'The time is before the minimum allowed time: {{time}}',
+  max: 'The time is after the maximum allowed time: {{time}}',
+};
+
+export const DEFAULT_INPUT_DATE_TIME_ERROR_MESSAGES: Record<string, string> = {
+  required: 'This field is required.',
+  min: 'The time is before the minimum allowed time: {{time}}',
+  max: 'The time is after the maximum allowed time: {{time}}',
+};
+
+export const DEFAULT_INPUT_TOGGLE_SWITCH_ERROR_MESSAGES: Record<string, string> = {
+  required: 'This field is required.',
+};
+
+export const DEFAULT_INPUT_CHECKBOX_ERROR_MESSAGES: Record<string, string> = {
+  required: 'This field is required.',
+};
+
+export const DEFAULT_INPUT_CHECKBOX_GROUP_ERROR_MESSAGES: Record<string, string> = {
+  required: 'This field is required.',
+};
+
+export const DEFAULT_INPUT_RADIO_GROUP_ERROR_MESSAGES: Record<string, string> = {
+  required: 'This field is required.',
+};
+
+export const DEFAULT_INPUT_SLIDER_ERROR_MESSAGES: Record<string, string> = {
+  required: 'This field is required.',
+  min:'The value is less than minimum allowed',
+  max: 'The value is greather than maximum allowed',
+  step: 'The value does not match the required step increment value',
+};
+
+export const DEFAULT_INPUT_FILE_UPLOAD_ERROR_MESSAGES: Record<string, string> = {
+  required: 'Please select a file.',
+  maxFiles: 'Select at most {{limit}} file(s).',
+  maxFileSize: 'Each file must be smaller than {{limit}}.',
+  maxTotalSize: 'Total size must be smaller than {{limit}}.',
+  accept: 'Only files of type {{accept}} are allowed.',
+};
+//#endregion
+
+//#region [WARNINGS]
+export const DEFAULT_INPUT_NUMBER_WARNING_MESSAGES: Record<string, string> = {
+  min:'The minimium value allowed is {{limit}}',
+  max: 'The maximum value allowed is {{limit}}',
+  step: 'The value does not match the required step increment value of {{limit}}',
+  precision: 'The value exceeds the allowed number of decimal places value of {{limit}}',
+};
+
+export const DEFAULT_INPUT_DATE_WARNINGS_MESSAGES: Record<string, string> = {
+  format: 'The date is not in correct format {{format}}',
+  min: 'The date is before the minimum allowed date: {{limit}}',
+  max: 'The date is after the maximum allowed date: {{limit}}'
+};
+
+export const DEFAULT_INPUT_TIME_WARNINGS_MESSAGES: Record<string, string> = {
+  format: 'The time is not in correct format {{format}}',
+  min: 'The time is before the minimum allowed time: {{limit}}',
+  max: 'The time is after the maximum allowed time: {{limit}}'
+};
+
+export const DEFAULT_INPUT_DATE_TIME_WARNINGS_MESSAGES: Record<string, string> = {
+  format: 'The date and time are not in correct format {{format}}',
+  min: 'The date and time are before the minimum allowed date and time: {{limit}}',
+  max: 'The date and time are after the maximum allowed date and time: {{limit}}'
+};
+
+export const DEFAULT_INPUT_TOGGLE_SWITCH_WARNINGS_MESSAGES: Record<string, string> = {
+  // No warnings for toggle switch
+};
+
+export const DEFAULT_INPUT_CHECKBOX_WARNINGS_MESSAGES: Record<string, string> = {
+  // No warnings for checkbox
+};
+
+export const DEFAULT_INPUT_CHECKBOX_GROUP_WARNINGS_MESSAGES: Record<string, string> = {
+  // No warnings for checkbox group
+};
+
+export const DEFAULT_INPUT_RADIO_GROUP_WARNINGS_MESSAGES: Record<string, string> = {
+  // No warnings for radio group
+};
+
+export const DEFAULT_INPUT_MULTI_SELECT_WARNINGS_MESSAGES: Record<string, string> = {
+  // No warnings for multi select
+};
+
+export const DEFAULT_INPUT_SELECTION_LIST_WARNINGS_MESSAGES: Record<string, string> = {
+  // No warnings for selection list
+};
+
+export const DEFAULT_INPUT_TEXT_WARNINGS_MESSAGES: Record<string, string> = {
+  // No warnings for text input
+};
+
+export const DEFAULT_INPUT_SLIDER_WARNING_MESSAGES: Record<string, string> = {
+  min:'The minimium value allowed is {{limit}}',
+  max: 'The maximum value allowed is {{limit}}',
+  step: 'The value does not match the required step increment value of {{limit}}',
+};
+//#endregion

package/src/lib/components/input/input-date/input-date-validators.ts

@@ -0,0 +1,41 @@
+import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';
+
+export function minDate(min: Date): ValidatorFn {
+  return (control: AbstractControl): ValidationErrors | null => {
+    const value = control.value as Date | null;
+    if (value && value < min) {
+      return { min: true };
+    }
+    return null;
+  };
+}
+
+export function maxDate(max: Date): ValidatorFn {
+  return (control: AbstractControl): ValidationErrors | null => {
+    const value = control.value as Date | null;
+    if (value && value > max) {
+      return { max: true };
+    }
+    return null;
+  };
+}
+
+export function afterDate(min: Date): ValidatorFn {
+  return (control: AbstractControl): ValidationErrors | null => {
+    const value = control.value as Date | null;
+    if (value && value <= min) {
+      return { after: true };
+    }
+    return null;
+  };
+}
+
+export function beforeDate(max: Date): ValidatorFn {
+  return (control: AbstractControl): ValidationErrors | null => {
+    const value = control.value as Date | null;
+    if (value && value >= max) {
+      return { before: true };
+    }
+    return null;
+  };
+}

package/src/lib/components/input/input-date/input-date.component.html

@@ -0,0 +1,41 @@
+<div class="frg-input__wrapper"
+  [class.input-error]="hasError"
+  [class.input-warning]="hasWarning">
+  @if(label){
+    <label [for]="id">{{ label | inputRequiredLabel: required }}</label>
+  }
+  <div class="frg-input__field">
+    <input
+      [id]="id"
+      [type]="inputType"
+      [placeholder]="placeholder"
+      [required]="required"
+      [disabled]="disabled"
+      [value]="formatDate(value)"
+      (blur)="onBlur($event)"
+      (focus)="onFocus($event)"
+      (input)="onInput($event)"
+    />
+    <button class="far fa-calendar frg-input__calendar-button"
+      aria-label="Open calendar"
+      (click)="toggleCalendar()"
+     ></button>
+  </div>
+  @if(showCalendar$ | async){
+    <frg-input-calendar
+      [minDate]="minDate"
+      [maxDate]="maxDate"
+      [selectedValue]="value"
+      (selectDate)="selectDate($event)">
+    </frg-input-calendar>
+  }
+</div>
+
+@if (showValidation) {
+  <frg-input-validation
+    [errorList]="errorList"
+    [warningList]="warningList"
+    [isFormInvalid]="hasError"
+  >
+  </frg-input-validation>
+}

package/src/lib/components/input/input-date/input-date.component.scss

@@ -0,0 +1,95 @@
+@use "sass:color";
+@use './../../../../../assets/styles/scss/variables' as *;
+
+:host {
+  display: block;
+  font-family: $input-font-family;
+
+  label {
+    display: flex;
+    font-size: $font-size-xs;
+    color: $input-text-color;
+    padding: $input-padding;
+  }
+
+  .frg-input {
+    &__wrapper {
+      display: inline-block;
+
+      &.input-error label {
+        color: $color-danger;
+      }
+
+      &.input-error .frg-input__field::after {
+        width: 100%;
+        right: 0;
+      }
+    }
+
+    &__field {
+      display: inline-flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: $input-padding;
+      border-bottom: 2px solid $input-border-color;
+      font-family: $input-font-family;
+      background: transparent;
+      position: relative;
+      width: 100%;
+
+      input {
+        border: none;
+        background: transparent;
+
+        &:focus {
+          outline: none;
+        }
+      }
+
+      span {
+        margin-left: 0.5rem;
+        cursor: pointer;
+        color: $input-text-color;
+      }
+
+      &::before {
+        content: "";
+        position: absolute;
+        bottom: -2px;
+        left: -50%;
+        width: 0;
+        height: 0.125rem;
+        background: $input-focus-border-color;
+        transition: width 0.3s ease, left 0.3s ease;
+      }
+
+      &:has(input:focus)::before {
+        width: 100%;
+        left: 0;
+      }
+
+      &::after {
+        content: "";
+        position: absolute;
+        bottom: -2px;
+        right: -50%;
+        width: 0;
+        height: 0.125rem;
+        background: $color-danger;
+        transition: width 0.3s ease, right 0.3s ease;
+      }
+    }
+
+    &__calendar-button {
+      border: none;
+      background: transparent;
+
+      &:focus,
+      &:focus-visible,
+      &:focus-within {
+        border: none;
+        outline: none;
+      }
+    }
+  }
+}

package/src/lib/components/input/input-date/input-date.component.spec.ts

@@ -0,0 +1,43 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { InputDateComponent } from './input-date.component';
+
+describe('InputDateComponent', () => {
+  let fixture: ComponentFixture<InputDateComponent>;
+  let component: InputDateComponent;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [InputDateComponent]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(InputDateComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('uses text input type for date', () => {
+    fixture.detectChanges();
+
+    const input = fixture.debugElement.query(By.css('input')).nativeElement as HTMLInputElement;
+    expect(input.type).toBe('text');
+  });
+
+  it('toggles calendar on button click', () => {
+    fixture.detectChanges();
+
+    const button = fixture.debugElement.query(By.css('.frg-input__calendar-button'));
+    button.nativeElement.click();
+
+    expect(component.showCalendar$.value).toBeTrue();
+  });
+
+  it('selectDate sets value and closes calendar', () => {
+    const date = new Date(2024, 0, 1);
+    component.showCalendar$.next(true);
+
+    (component as any).selectDate(date);
+
+    expect(component.value).toEqual(date);
+    expect(component.showCalendar$.value).toBeFalse();
+  });
+});