@tacdaed/fragments 1.0.0-beta.1 → 1.0.0-beta.3

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

@@ -1,359 +0,0 @@
-import { AsyncPipe } from '@angular/common';
-import { Component, HostListener, Input } from '@angular/core';
-import { Validators } from '@angular/forms';
-import { BehaviorSubject } from 'rxjs';
-import { DateFormat } from '../../../types/common.types';
-import { buildDateFormatRegex, convertStringToDate, formatDateToString, isValidDate } from '../../../utils/date.utils';
-import { InputBase } from '../input-base';
-import { InputCalendarComponent } from '../input-calendar/input-calendar.component';
-import { DEFAULT_INPUT_DATE_ERROR_MESSAGES, DEFAULT_INPUT_DATE_WARNINGS_MESSAGES } from '../input-consts';
-import { InputDateType } from '../input-type';
-import { InputValidationComponent } from '../input-validation/input-validation.component';
-import { InputRequiredLabelPipe } from '../input.pipe';
-import { maxDate, minDate } from './input-date-validators';
-
-@Component({
-  selector: 'frg-input-date',
-  imports: [InputValidationComponent, InputRequiredLabelPipe, InputCalendarComponent, AsyncPipe],
-  templateUrl: './input-date.component.html',
-  styleUrl: './input-date.component.scss',
-})
-export class InputDateComponent extends InputBase<Date | null> {
-
-  @HostListener('document:click', ['$event'])
-  onDocumentClick(event: MouseEvent) {
-    const target = event.target as HTMLElement;
-
-    if (!target.closest('.frg-input__wrapper')) {
-      this.showCalendar$.next(false);
-    }
-  }
-
-  /**
-   * @inheritdoc
-   */
-  @Input() public override label: string = '';
-  /**
-   * @inheritdoc
-   */
-  @Input() public override placeholder: string = '';
-  /**
-   * @inheritdoc
-   */
-  @Input() public override required: boolean = false;
-  /**
-   * @inheritdoc
-   */
-  @Input() public override showValidation: boolean = true;
-  /**
-   * @inheritdoc
-   */
-  @Input() public override errorMessages: Record<string, string> = {};
-  /**
-   * The type of the input element.
-   * Can be 'text', 'password', 'email', 'tel', etc.
-   * Defaults to 'text'.
-   *
-   * @see InputTextType
-   */
-  @Input() public type: InputDateType = 'date';
-  /**
-   * Minimum year selectable in the calendar
-   */
-  @Input() public minDate: Date = new Date(1900, 0, 1);
-  /**
-   * Maximum year selectable in the calendar
-   */
-  @Input() public maxDate: Date = new Date(2099, 11, 31);
-  /**
-   * The format of date
-   */
-  @Input() public format: DateFormat = 'dd/MM/yyyy';
-  /**
-   * Enables strict mode for email validation.
-   * When set to true, the email validator will use a more stringent pattern.
-   * Defaults to false.
-   */
-  @Input() public validatorStrictMode: boolean = false;
-
-  /**
-   * Used for show calendar
-   */
-  public showCalendar$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
-
-  /**
-   * Determines the actual input type to be used in the template.
-   * If the type is 'password', it toggles between 'text' and 'password'
-   * based on the showPassword property.
-   *
-   * @returns The input type as a string.
-   */
-  public get inputType(): string {
-    if (this.type === 'date') {
-      return 'text';
-    }
-    return this.type;
-  }
-
-  /** Internal store for warnings */
-  private warnings: Record<string, boolean> = {};
-
-  /**
-   * @inheritdoc
-   */
-  public override ngOnInit(): void {
-    super.ngOnInit();
-    this.initPlaceholder();
-    this.initValidators();
-  }
-
-  /**
-   * Handles the blur event on the input element.
-   * Validates and formats the input value.
-   * Marks the control as touched and updates the model value.
-   * @param event Focus event
-   */
-  public override onBlur(event: FocusEvent): void {
-    const input = event.target as HTMLInputElement;
-    const value = input.value.trim();
-
-    this.validate(value);
-
-    if (isValidDate(value, this.format)) {
-      let date = convertStringToDate(value, this.format);
-      if (date) {
-        date = this.clampDate(date);
-      }
-      this.value = date ?? null;
-      input.value = this.formatDate(this.value);
-    } else {
-      input.value = '';
-      this.value = null;
-    }
-
-    this.onTouched();
-    this.onChange(this.value);
-  }
-
-  /**
-   * Handles the input event on the input element.
-   * Validates the input value.
-   * @param event Input event
-   */
-  public override onInput(event: Event): void {
-    const input = event.target as HTMLInputElement;
-    const value = input.value.trim();
-
-    this.validate(value);
-  }
-
-  /**
-   * Handles the blur event on the input element.
-   * Marks the control as touched.
-   */
-  public override onFocus(_event: FocusEvent): void {
-    this.showCalendar$.next(true);
-  }
-
-  /**
-   * Format value for input display
-   * @param value Date value
-   * @returns Formatted date string
-   */
-  protected formatDate(value: Date | null): string {
-    if(value){
-      return formatDateToString(value, this.format);
-    }
-
-    return '';
-  }
-
-  protected selectDate(date: Date): void {
-    this.value = date;
-
-    this.onChange(this.value);
-    this.onTouched();
-
-    this.showCalendar$.next(false);
-  }
-
-  protected toggleCalendar(){
-    this.showCalendar$.next(!this.showCalendar$.value);
-  }
-
-  /**
-   * @inheritdoc
-   */
-  protected updateView(_value: Date | null): void {
-    // Handled by Angular binding
-  }
-
-  /**
-   * @inheritdoc
-   */
-  protected updateDisabledState(_isDisabled: boolean): void {
-    // Handled by Angular binding
-  }
-
-  /**
-   * @inheritdoc
-   */
-  protected override get errorList(): string[] {
-    if (!this.control?.errors) return [];
-
-    const errors = this.control.errors;
-    return Object.keys(errors)
-      .filter(key => !key.startsWith('warning_'))
-      .map(key => {
-        if (this.errorMessages[key]) {
-          return this.errorMessages[key];
-        }
-        let template = this.errorMessages[key] || DEFAULT_INPUT_DATE_ERROR_MESSAGES[key] || 'Invalid field.';
-
-        switch (key) {
-          case 'min':
-            template = template.replace('{{date}}', formatDateToString(this.minDate, this.format));
-            break;
-          case 'max':
-            template = template.replace('{{date}}', formatDateToString(this.maxDate, this.format));
-            break;
-        }
-
-        return template;
-      });
-  }
-
-  /**
-   * Returns dynamic warning messages, replacing {{limit}} with actual values.
-   */
-  protected override get warningList(): string[] {
-    return Object.keys(this.warnings).map(key => {
-      const template = DEFAULT_INPUT_DATE_WARNINGS_MESSAGES[key] || 'Check this value.';
-
-      let replacement: string | undefined;
-
-      switch (key) {
-        case 'format':
-          replacement = this.format;
-          break;
-        case 'min':
-          replacement = formatDateToString(this.minDate, this.format);
-          break;
-        case 'max':
-          replacement = formatDateToString(this.maxDate, this.format);
-          break;
-      }
-
-      if (replacement != null) {
-        const placeholder = key === 'format' ? '{{format}}' : '{{limit}}';
-        return template.replace(placeholder, replacement.toString());
-      }
-
-      return template;
-    });
-  }
-
-  /**
-   * Returns whether any warnings are active.
-   */
-  protected get hasWarning(): boolean {
-    return this.warningList.length > 0;
-  }
-
-  /**
-   * Adds a warning flag
-   * @param key Warning key
-   */
-  private addWarning(key: string): void {
-    this.warnings[key] = true;
-  }
-
-  /**
-   * Clamp a date within min/max boundaries
-   * @param date Date to clamp
-   * @returns Clamped date and sets warnings if needed
-   */
-  private clampDate(date: Date): Date {
-    let clamped = date;
-
-    if (this.minDate && date < this.minDate) {
-      this.addWarning('min');
-      clamped = this.minDate;
-    }
-
-    if (this.maxDate && date > this.maxDate) {
-      this.addWarning('max');
-      clamped = this.maxDate;
-    }
-
-    return clamped;
-  }
-
-  /**
-   * Initialize the placeholder based on the date format
-   */
-  private initPlaceholder() {
-    this.placeholder = this.format;
-  }
-
-  /**
-   * Initialize validators based on inputs
-   */
-  private initValidators(): void {
-    if (this.control) {
-      const validators = [];
-
-      if (this.required) {
-        validators.push(Validators.required);
-      }
-
-      if (this.minDate) {
-        validators.push(minDate(this.minDate));
-      }
-
-      if (this.maxDate) {
-        validators.push(maxDate(this.maxDate));
-      }
-
-      this.control.setValidators(validators);
-      this.control.updateValueAndValidity();
-    }
-  }
-
-  /**
-   * Validate the input value against the specified format
-   * @param value Input value
-   */
-  private validate(value: string): void {
-    this.removeWarning('format');
-    this.removeWarning('min');
-    this.removeWarning('max');
-
-    if (!value) return;
-
-    if (this.format) {
-      const regex = buildDateFormatRegex(this.format);
-      if (!regex.test(value)) {
-        this.addWarning('format');
-        return;
-      }
-    }
-
-    const date = convertStringToDate(value, this.format);
-    if (!date) return;
-
-    if (this.minDate && date < this.minDate) {
-      this.addWarning('min');
-    } else if (this.maxDate && date > this.maxDate) {
-      this.addWarning('max');
-    }
-  }
-
-  /**
-   * Remove a warning flag
-   * @param key Warning key
-   */
-  private removeWarning(key: string): void {
-    delete this.warnings[key];
-  }
-}

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

@@ -1,70 +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="text"
-      [placeholder]="placeholder"
-      [required]="required"
-      [disabled]="disabled"
-      [value]="formatDate(value)"
-      (blur)="onBlur($event)"
-      (focus)="onFocus($event)"
-      (input)="onInput($event)"
-    />
-    <div class="frg-input__handle-buttons">
-      @if(value){
-        <button
-          type="button"
-          class="frg-input__clear-button"
-          aria-label="Clear input"
-          (click)="clearValue()"
-          >
-          &times;
-        </button>
-      
-      }
-      <button class="fa-regular fa-calendar-days frg-input__calendar-button"
-      aria-label="Open calendar"
-      (click)="toggleDateTimePicker()"
-      ></button>
-    </div>
-  </div>
-  @if(showDateTimePicker$ | async){
-    <div class="frg-input__date-time-picker">
-      <div class="frg-input__date-time-panel">
-        <frg-input-calendar
-          [minDate]="minDateTime"
-          [maxDate]="maxDateTime"
-          [selectedValue]="value"
-          (selectDate)="selectDate($event)"
-        >
-        </frg-input-calendar>
-
-        <frg-input-clock-picker
-          [timeFormat]="timeFormat"
-          [selectedHour]="value ? value.getHours().toString() : null"
-          [selectedMinute]="value ? value.getMinutes().toString() : null"
-          [selectedMeridiem]="currentMeridiem"
-          (selectHour)="selectHour($event)"
-          (selectMinute)="selectMinute($event)"
-          (selectMeridiem)="selectMeridiem($event)">
-        </frg-input-clock-picker>
-      </div>
-    </div>
-  }
-</div>
-
-@if (showValidation) {
-  <frg-input-validation
-    [errorList]="errorList"
-    [warningList]="warningList"
-    [isFormInvalid]="hasError"
-  >
-  </frg-input-validation>
-}

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

@@ -1,133 +0,0 @@
-@use "sass:color";
-@use './../../../../../assets/styles/scss/variables' as *;
-
-:host {
-  display: block;
-
-  label {
-    display: flex;
-    font-size: $font-size-xs;
-    color: $input-text-color;
-    padding: $input-padding;
-  }
-
-  .frg-input {
-    font-family: $input-font-family;
-    &__wrapper {
-      display: inline-block;
-      position: relative;
-      width: 100%;
-
-      &.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;
-      }
-    }
-
-    &__clear-button {
-      background: transparent;
-      border: none;
-      font-size: $font-size-2xl;
-      color: $color-dark-neutral;
-      line-height: 0;
-      font-weight: lighter;
-    }
-
-    &__calendar-button {
-      border: none;
-      background: transparent;
-      color: $color-dark-neutral;
-      
-      &:focus,
-      &:focus-visible,
-      &:focus-within {
-        border: none;
-        outline: none;
-      }
-    }
-
-    &__date-time-picker {
-      position: absolute;
-      top: calc(100% + 0.5rem);
-      left: 0;
-      z-index: 5;
-    }
-
-    &__date-time-panel {
-      display: flex;
-      align-items: center;
-      gap: 0.75rem;
-      padding: 0.5rem;
-      border-radius: 0.5rem;
-      background: $color-light;
-      box-shadow: $box-shadow-md;
-      flex-wrap: nowrap;
-      justify-content: center;
-    }
-
-    &__date-time-panel frg-input-calendar,
-    &__date-time-panel frg-input-clock-picker {
-      display: block;
-      flex: 0 0 auto;
-      margin: 0;
-    }
-  }
-}

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

@@ -1,36 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { InputDateTimeComponent } from './input-date-time.component';
-
-describe('InputDateTimeComponent', () => {
-  let fixture: ComponentFixture<InputDateTimeComponent>;
-  let component: InputDateTimeComponent;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [InputDateTimeComponent]
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(InputDateTimeComponent);
-    component = fixture.componentInstance;
-  });
-
-  it('toggles the date time picker on button click', () => {
-    fixture.detectChanges();
-
-    const button = fixture.debugElement.query(By.css('.frg-input__calendar-button'));
-    button.nativeElement.click();
-
-    expect(component.showDateTimePicker$.value).toBeTrue();
-  });
-
-  it('clears value and closes pickers', () => {
-    component.value = new Date(2024, 0, 1, 9, 30);
-    component.showDateTimePicker$.next(true);
-
-    component.clearValue();
-
-    expect(component.value).toBeNull();
-    expect(component.showDateTimePicker$.value).toBeFalse();
-  });
-});