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

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

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

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

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

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