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

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

@@ -0,0 +1,387 @@
+import { AsyncPipe } from '@angular/common';
+import { Component, HostListener, Input } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+import { BehaviorSubject } from 'rxjs';
+import { DateTimeFormat, TimeFormat } from '../../../types/common.types';
+import { buildDateTimeFormatRegex, convertStringToDateTime, extractTimeFormat, formatDateTimeToString, isMeridiemFormat, isValidDateTime } from '../../../utils/date.utils';
+import { InputBase } from '../input-base';
+import { InputCalendarComponent } from '../input-calendar/input-calendar.component';
+import { InputClockPickerComponent } from '../input-clock-picker/input-clock-picker.component';
+import { DEFAULT_INPUT_DATE_TIME_ERROR_MESSAGES, DEFAULT_INPUT_DATE_TIME_WARNINGS_MESSAGES } from '../input-consts';
+import { InputTimeMeridiem } from '../input-type';
+import { InputValidationComponent } from '../input-validation/input-validation.component';
+import { InputRequiredLabelPipe } from '../input.pipe';
+
+@Component({
+  selector: 'frg-input-date-time',
+  imports: [InputRequiredLabelPipe, ReactiveFormsModule, AsyncPipe, InputCalendarComponent, InputValidationComponent, InputClockPickerComponent],
+  templateUrl: './input-date-time.component.html',
+  styleUrl: './input-date-time.component.scss',
+})
+export class InputDateTimeComponent extends InputBase<Date | null> {
+
+  @HostListener('document:click', ['$event'])
+  onDocumentClick(event: MouseEvent) {
+    const target = event.target as HTMLElement;
+
+    const wrapper = document.getElementById(this.id)?.closest('.frg-input__wrapper');
+
+    if (!target.closest('.frg-input__wrapper') || !wrapper?.contains(target)) {
+      this.showDateTimePicker$.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> = {};
+  /**
+   * Minimum year selectable in the calendar
+   */
+  @Input() public minDateTime: Date = new Date(1900, 0, 1, 0, 0, 0);
+  /**
+   * Maximum year selectable in the calendar
+   */
+  @Input() public maxDateTime: Date = new Date(2099, 11, 31, 0, 0, 0);
+  /**
+   * The format of date time
+   */
+  @Input() public format: DateTimeFormat = 'dd/MM/yyyy HH:mm';
+
+  public showDateTimePicker$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+
+  public get currentMeridiem(): InputTimeMeridiem{
+    return this.meridiem;
+  }
+
+  /**
+  * Returns whether any warnings are active.
+  */
+  protected get hasWarning(): boolean {
+    return this.warningList.length > 0;
+  }
+
+  /**
+   * 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_TIME_WARNINGS_MESSAGES[key] || 'Check this value.';
+
+      let replacement: string | undefined;
+
+      switch (key) {
+        case 'format':
+          replacement = this.format;
+          break;
+        case 'min':
+          replacement = formatDateTimeToString(this.minDateTime, this.format);
+          break;
+        case 'max':
+          replacement = formatDateTimeToString(this.maxDateTime, this.format);
+          break;
+      }
+
+      if (replacement != null) {
+        const placeholder = key === 'format' ? '{{format}}' : '{{limit}}';
+        return template.replace(placeholder, replacement.toString());
+      }
+
+      return template;
+    });
+  }
+
+  /** Internal store for warnings */
+  private readonly warnings: Record<string, boolean> = {};
+
+  /** Current meridiem passed to clock picker */
+  private meridiem: InputTimeMeridiem = 'AM';
+
+  /**
+   * Handles the blur event on the input element.
+   * Marks the control as touched.
+   */
+  public override onFocus(_event: FocusEvent): void {
+    this.showDateTimePicker$.next(true);
+  }
+
+  /**
+   * Handles the blur event on the input element.
+   * Marks the control as touched.
+   */
+  public override onBlur(event: FocusEvent): void {
+    const input = event.target as HTMLInputElement;
+    const value = input.value.trim();
+
+    this.validate(value);
+
+    if (isValidDateTime(value, this.format)) {
+      let date = convertStringToDateTime(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);
+  }
+
+  /**
+   * Format value for input display
+   * @param value Date value
+   * @returns Formatted date string
+   */
+  protected formatDate(value: Date | null): string {
+    if (value) {
+      return formatDateTimeToString(value, this.format);
+    }
+
+    return '';
+  }
+
+  protected override updateView(_value: Date | null): void {
+    // To be implemented<
+  }
+
+  protected override updateDisabledState(_isDisabled: boolean): void {
+    // To be implemented
+  }
+
+  /**
+   * @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_TIME_ERROR_MESSAGES[key] || 'Invalid field.';
+
+        switch (key) {
+          case 'min':
+            template = template.replace('{{date}}', formatDateTimeToString(this.minDateTime, this.format));
+            break;
+          case 'max':
+            template = template.replace('{{date}}', formatDateTimeToString(this.maxDateTime, this.format));
+            break;
+        }
+
+        return template;
+      });
+  }
+
+  /**
+   * @inheritdoc
+   */
+  public override ngOnInit(): void {
+    super.ngOnInit();
+    this.initPlaceholder();
+  }
+
+  public clearValue(): void {
+    this.value = null;
+    this.meridiem = 'AM';
+    this.showDateTimePicker$.next(false);
+
+    this.onChange(this.value);
+  }
+
+  protected selectDate(date: Date) {
+    if (this.value) {
+      const hours = this.value.getHours();
+      const minutes = this.value.getMinutes();
+      const seconds = this.value.getSeconds();
+      const milliseconds = this.value.getMilliseconds();
+
+      this.value = new Date(
+        date.getFullYear(),
+        date.getMonth(),
+        date.getDate(),
+        hours,
+        minutes,
+        seconds,
+        milliseconds
+      );
+    } else {
+      this.value = date;
+    }
+
+    this.onChange(this.value);
+    this.onTouched();
+    this.selectMeridiem(this.currentMeridiem);
+  }
+
+  /**
+   * Initialize the placeholder based on the date format
+   */
+  private initPlaceholder() {
+    this.placeholder = this.format;
+  }
+
+  protected selectHour(hour: string) {
+    if (!this.value) {
+      this.value = this.clampDate(new Date());
+    }
+
+    const newDate = new Date(this.value);
+    const currentHours = newDate.getHours();
+
+    let newHours = Number.parseInt(hour, 10);
+
+    if (isMeridiemFormat(extractTimeFormat(this.format))) {
+      const isPM = currentHours >= 12;
+
+      if (isPM) {
+        newHours = newHours === 12 ? 12 : newHours + 12;
+      } else {
+        newHours = newHours === 12 ? 0 : newHours;
+      }
+    }
+
+    newDate.setHours(newHours);
+    this.value = newDate;
+
+    this.onChange(this.value);
+    this.onTouched();
+  }
+
+  protected selectMinute(minute: string) {
+    if (!this.value) {
+      this.value = this.clampDate(new Date());
+    }
+
+    const newDate = new Date(this.value);
+    const newMinutes = Number.parseInt(minute, 10);
+
+    newDate.setMinutes(newMinutes);
+    this.value = newDate;
+
+    this.onChange(this.value);
+    this.onTouched();
+  }
+
+  protected selectMeridiem(meridiem: InputTimeMeridiem) {
+    if (!this.value) {
+      const now = new Date();
+      const base = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0, 0);
+      this.value = this.clampDate(base);
+      this.meridiem = meridiem;
+      this.onChange(this.value);
+      this.onTouched();
+      return;
+    }
+
+    const newDate = new Date(this.value);
+    let hours = newDate.getHours();
+
+    if (meridiem === 'AM' && hours >= 12) hours -= 12;
+    if (meridiem === 'PM' && hours < 12) hours += 12;
+
+    newDate.setHours(hours);
+    this.value = newDate;
+    this.meridiem = meridiem;
+
+    this.onChange(this.value);
+    this.onTouched();
+  }
+
+  protected get timeFormat(): TimeFormat | null {
+    return extractTimeFormat(this.format);
+  }
+
+  protected toggleDateTimePicker() {
+    this.showDateTimePicker$.next(!this.showDateTimePicker$.value);
+  }
+
+  /**
+   * 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.minDateTime && date < this.minDateTime) {
+      this.addWarning('min');
+      clamped = this.minDateTime;
+    }
+
+    if (this.maxDateTime && date > this.maxDateTime) {
+      this.addWarning('max');
+      clamped = this.maxDateTime;
+    }
+
+    return clamped;
+  }
+
+  /**
+   * Remove a warning flag
+   * @param key Warning key
+   */
+  private removeWarning(key: string): void {
+    delete this.warnings[key];
+  }
+
+  /**
+   * 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 = buildDateTimeFormatRegex(this.format);
+      if (!regex.test(value)) {
+        this.addWarning('format');
+        return;
+      }
+    }
+
+    const date = convertStringToDateTime(value, this.format);
+    if (!date) return;
+
+    if (this.minDateTime && date < this.minDateTime) {
+      this.addWarning('min');
+    } else if (this.maxDateTime && date > this.maxDateTime) {
+      this.addWarning('max');
+    }
+  }
+}

package/src/lib/components/input/input-file-upload/input-file-upload.component.html

@@ -0,0 +1,89 @@
+<div class="frg-input__wrapper"
+  [class.input-error]="hasError"
+  (dragover)="onDragOver($event)"
+  (dragleave)="onDragLeave($event)"
+  (drop)="onDrop($event)"
+>
+  @if(label){
+    <label [for]="id">{{ label | inputRequiredLabel: required }}</label>
+  }
+
+  <div class="frg-input__file" [class.has-files]="hasFiles" [class.is-dragover]="isDragOver">
+    <div class="frg-input__file-main">
+      <frg-button
+        [styleType]="'primary'"
+        [shape]="'pill'"
+        [size]="'small'"
+        [text]="buttonLabel"
+        [iconClass]="'fas fa-plus'"
+        [iconStyleType]="'light'"
+        [iconPosition]="'left'"
+        [disabled]="disabled"
+        (clickEvent)="triggerFileDialog()"
+      >
+      </frg-button>
+
+      <div class="frg-input__file-summary">
+        <span class="frg-input__file-summary-title">{{ fileSummary }}</span>
+        <span class="frg-input__file-summary-subtitle">Drop or browse to upload</span>
+      </div>
+    </div>
+
+    @if(showClearButton && hasFiles){
+      <button
+        type="button"
+        class="frg-input__file-clear"
+        [disabled]="disabled"
+        (click)="clearFiles()"
+      >
+        Clear all
+      </button>
+    }
+  </div>
+
+  <input
+    #fileInput
+    [id]="id"
+    type="file"
+    class="frg-input__file-input"
+    [required]="required"
+    [disabled]="disabled"
+    [attr.accept]="accept || null"
+    [attr.multiple]="multiple ? '' : null"
+    (change)="onFileChange($event)"
+    (blur)="onBlur($event)"
+  />
+
+  @if(showFileList && files.length){
+    <div class="frg-input__file-list">
+      @for(file of files; track trackFile($index, file)){
+        <div class="frg-input__file-chip">
+          <span class="frg-input__file-name">{{ file.name }}</span>
+          @if(showFileSize){
+            <span class="frg-input__file-size">{{ formatBytes(file.size) }}</span>
+          }
+          @if(multiple){
+            <button
+              type="button"
+              class="frg-input__file-remove"
+              [disabled]="disabled"
+              (click)="removeFile($index)"
+              aria-label="Remove file"
+            >
+              x
+            </button>
+          }
+        </div>
+      }
+    </div>
+  }
+</div>
+
+@if (showValidation) {
+  <frg-input-validation
+    [errorList]="errorList"
+    [warningList]="warningList"
+    [isFormInvalid]="hasError"
+  >
+  </frg-input-validation>
+}

package/src/lib/components/input/input-file-upload/input-file-upload.component.scss

@@ -0,0 +1,171 @@
+@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 {
+      position: relative;
+      display: inline-block;
+      width: 100%;
+    }
+
+    &__file {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 1rem;
+      padding: 0.75rem 0.85rem;
+      border: 1px dashed $input-border-color;
+      border-radius: $input-border-radius;
+      font-family: $input-font-family;
+      color: $input-text-color;
+      background: $input-background;
+      transition: border-color 0.2s ease, box-shadow 0.2s ease;
+
+      &.has-files {
+        border-style: solid;
+        border-color: $input-focus-border-color;
+        box-shadow: $box-shadow-light-sm;
+      }
+
+      &.is-dragover {
+        border-color: $color-primary;
+        box-shadow: $box-shadow-primary-sm;
+      }
+
+      &:hover {
+        border-color: $input-focus-border-color;
+      }
+    }
+
+    &__file-main {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      flex: 1;
+      min-width: 0;
+    }
+
+    frg-button .frg-btn {
+      margin: 0;
+    }
+
+    &__file-summary {
+      display: flex;
+      flex-direction: column;
+      gap: 0.15rem;
+      min-width: 0;
+      font-size: $font-size-sm;
+      color: $input-text-color;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    &__file-summary-title {
+      font-weight: 600;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    &__file-summary-subtitle {
+      font-size: $font-size-xs;
+      color: $color-dark-soft;
+    }
+
+    &__file-clear {
+      border: 1px solid $color-danger;
+      background: transparent;
+      color: $color-danger;
+      font-size: $font-size-xs;
+      border-radius: 999px;
+      padding: 0.2rem 0.6rem;
+      cursor: pointer;
+
+      &:disabled {
+        cursor: not-allowed;
+        opacity: 0.6;
+      }
+    }
+
+    &__file-input {
+      position: absolute;
+      inset: 0;
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    &__file-list {
+      margin-top: 0.5rem;
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.4rem;
+      font-size: $font-size-sm;
+      color: $input-text-color;
+    }
+
+    &__file-chip {
+      display: flex;
+      align-items: center;
+      gap: 0.35rem;
+      background: $color-light;
+      border: 1px solid $input-border-color;
+      border-radius: 999px;
+      padding: 0.2rem 0.5rem;
+      box-shadow: $box-shadow-light-sm;
+    }
+
+    &__file-name {
+      max-width: 10rem;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    &__file-size {
+      color: $color-dark-soft;
+      font-size: $font-size-xs;
+    }
+
+    &__file-remove {
+      border: none;
+      background: transparent;
+      color: $color-danger;
+      font-size: $font-size-xs;
+      cursor: pointer;
+
+      &:disabled {
+        cursor: not-allowed;
+        opacity: 0.6;
+      }
+    }
+
+    &__wrapper.input-error .frg-input__file {
+      border-color: $color-danger;
+    }
+
+    &__wrapper.input-error label {
+      color: $color-danger;
+    }
+
+    &__wrapper::before {
+      content: "";
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 0;
+      height: 0;
+    }
+  }
+}

package/src/lib/components/input/input-file-upload/input-file-upload.component.spec.ts

@@ -0,0 +1,43 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { RouterTestingModule } from '@angular/router/testing';
+import { InputFileUploadComponent } from './input-file-upload.component';
+
+describe('InputFileUploadComponent', () => {
+  let fixture: ComponentFixture<InputFileUploadComponent>;
+  let component: InputFileUploadComponent;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [InputFileUploadComponent, RouterTestingModule]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(InputFileUploadComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('renders label when provided', () => {
+    component.label = 'Attachment';
+
+    fixture.detectChanges();
+
+    const label = fixture.debugElement.query(By.css('label'));
+    expect(label.nativeElement.textContent).toContain('Attachment');
+  });
+
+  it('updates value on file change', () => {
+    const onChangeSpy = jasmine.createSpy('onChange');
+    component.registerOnChange(onChangeSpy);
+
+    fixture.detectChanges();
+
+    const file = new File(['test'], 'test.txt', { type: 'text/plain' });
+    const input = fixture.debugElement.query(By.css('input[type="file"]')).nativeElement as HTMLInputElement;
+
+    Object.defineProperty(input, 'files', { value: [file] });
+    input.dispatchEvent(new Event('change'));
+
+    expect(component.value).toBe(file);
+    expect(onChangeSpy).toHaveBeenCalledWith(file);
+  });
+});