@tacdaed/fragments 1.0.0-beta.4 → 1.0.0-beta.6

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

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

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

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

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

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

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