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

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

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

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

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

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