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

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

@@ -0,0 +1,351 @@
+import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
+import { InputBase } from '../input-base';
+import { InputRequiredLabelPipe } from '../input.pipe';
+import { ButtonComponent } from '../../button/button.component';
+import { InputValidationComponent } from '../input-validation/input-validation.component';
+import { DEFAULT_INPUT_FILE_UPLOAD_ERROR_MESSAGES } from '../input-consts';
+
+type InputFileUploadValue = File | File[] | null;
+
+@Component({
+  selector: 'frg-input-file-upload',
+  imports: [InputRequiredLabelPipe, InputValidationComponent, ButtonComponent],
+  templateUrl: './input-file-upload.component.html',
+  styleUrl: './input-file-upload.component.scss',
+})
+export class InputFileUploadComponent extends InputBase<InputFileUploadValue> implements OnInit {
+  /**
+   * @inheritdoc
+   */
+  @Input() public override label: string = '';
+  /**
+   * @inheritdoc
+   */
+  @Input() public override required: boolean = false;
+  /**
+   * @inheritdoc
+   */
+  @Input() public override showValidation: boolean = true;
+  /**
+   * @inheritdoc
+   */
+  @Input() public override errorMessages: Record<string, string> = {};
+
+  /**
+   * Accepted file types (e.g. ".pdf,.png" or "image/*").
+   */
+  @Input() public accept: string = '';
+  /**
+   * Allow multiple file selection.
+   */
+  @Input() public multiple: boolean = false;
+  /**
+   * Maximum number of files allowed.
+   */
+  @Input() public maxFiles: number | null = null;
+  /**
+   * Maximum size per file in bytes.
+   */
+  @Input() public maxFileSize: number | null = null;
+  /**
+   * Maximum total size in bytes.
+   */
+  @Input() public maxTotalSize: number | null = null;
+  /**
+   * Button label for opening the file dialog.
+   */
+  @Input() public buttonLabel: string = 'Browse';
+  /**
+   * Placeholder text when no file is selected.
+   */
+  @Input() public noFileText: string = 'No file selected';
+  /**
+   * Show a clear button when files are selected.
+   */
+  @Input() public showClearButton: boolean = true;
+  /**
+   * Show individual file list.
+   */
+  @Input() public showFileList: boolean = true;
+  /**
+   * Show file size in the list.
+   */
+  @Input() public showFileSize: boolean = true;
+
+  @ViewChild('fileInput', { static: true }) private readonly fileInput!: ElementRef<HTMLInputElement>;
+
+  public files: File[] = [];
+  public isDragOver: boolean = false;
+
+  private readonly ownedErrors = new Set([
+    'required',
+    'maxFiles',
+    'maxFileSize',
+    'maxTotalSize',
+    'accept',
+  ]);
+
+  public override ngOnInit(): void {
+    super.ngOnInit();
+    this.syncFromValue(this.value);
+    this.updateErrors();
+  }
+
+  protected override updateView(value: InputFileUploadValue | null): void {
+    this.syncFromValue(value);
+    if (!value) {
+      this.resetNativeInput();
+    }
+    this.updateErrors();
+  }
+
+  protected override updateDisabledState(_isDisabled: boolean): void {
+    // Handled by Angular binding
+  }
+
+  protected override get errorList(): string[] {
+    if (!this.control?.errors) return [];
+    return Object.keys(this.control.errors).map(key => {
+      if (this.errorMessages[key]) {
+        return this.errorMessages[key];
+      }
+
+      let template = DEFAULT_INPUT_FILE_UPLOAD_ERROR_MESSAGES[key] || 'Invalid field.';
+
+      switch (key) {
+        case 'maxFiles':
+          if (this.maxFiles != null) {
+            template = template.replace('{{limit}}', this.maxFiles.toString());
+          }
+          break;
+        case 'maxFileSize':
+          if (this.maxFileSize != null) {
+            template = template.replace('{{limit}}', this.formatBytes(this.maxFileSize));
+          }
+          break;
+        case 'maxTotalSize':
+          if (this.maxTotalSize != null) {
+            template = template.replace('{{limit}}', this.formatBytes(this.maxTotalSize));
+          }
+          break;
+        case 'accept':
+          if (this.accept) {
+            template = template.replace('{{accept}}', this.accept);
+          }
+          break;
+      }
+
+      return template;
+    });
+  }
+
+  protected override get warningList(): string[] {
+    return [];
+  }
+
+  public get fileSummary(): string {
+    if (!this.files.length) return this.noFileText;
+    if (this.files.length === 1) return this.files[0].name;
+    return `${this.files.length} files selected`;
+  }
+
+  public get hasFiles(): boolean {
+    return this.files.length > 0;
+  }
+
+  public triggerFileDialog(): void {
+    if (this.disabled) return;
+    this.fileInput.nativeElement.click();
+  }
+
+  public onFileChange(event: Event): void {
+    const input = event.target as HTMLInputElement;
+    const selectedFiles = Array.from(input.files ?? []);
+    if (!selectedFiles.length) {
+      return;
+    }
+    this.handleSelectedFiles(selectedFiles);
+  }
+
+  public onDragOver(event: DragEvent): void {
+    if (this.disabled) return;
+    event.preventDefault();
+    event.stopPropagation();
+    this.isDragOver = true;
+  }
+
+  public onDragLeave(event: DragEvent): void {
+    if (this.disabled) return;
+    event.preventDefault();
+    event.stopPropagation();
+    this.isDragOver = false;
+  }
+
+  public onDrop(event: DragEvent): void {
+    if (this.disabled) return;
+    event.preventDefault();
+    event.stopPropagation();
+    this.isDragOver = false;
+
+    const droppedFiles = Array.from(event.dataTransfer?.files ?? []);
+    if (!droppedFiles.length) {
+      return;
+    }
+
+    this.handleSelectedFiles(droppedFiles);
+  }
+
+  public override onBlur(_event: FocusEvent): void {
+    this.onTouched();
+  }
+
+  public clearFiles(): void {
+    if (this.disabled) return;
+    this.files = [];
+    this.value = null;
+    this.resetNativeInput();
+    this.onChange(this.value);
+    this.updateErrors();
+    this.onTouched();
+  }
+
+  public removeFile(index: number): void {
+    if (this.disabled || !this.multiple) {
+      this.clearFiles();
+      return;
+    }
+
+    this.files = this.files.filter((_, idx) => idx !== index);
+    this.value = this.files.length ? [...this.files] : null;
+    this.resetNativeInput();
+    this.onChange(this.value);
+    this.updateErrors();
+    this.onTouched();
+  }
+
+  public trackFile(_index: number, file: File): string {
+    return `${file.name}-${file.size}-${file.lastModified}`;
+  }
+
+  public formatBytes(bytes: number): string {
+    if (bytes < 1024) return `${bytes} B`;
+    const units = ['KB', 'MB', 'GB', 'TB'];
+    let size = bytes / 1024;
+    let unitIndex = 0;
+    while (size >= 1024 && unitIndex < units.length - 1) {
+      size /= 1024;
+      unitIndex += 1;
+    }
+    return `${size.toFixed(size < 10 ? 1 : 0)} ${units[unitIndex]}`;
+  }
+
+  private syncFromValue(value: InputFileUploadValue | null): void {
+    if (!value) {
+      this.files = [];
+      return;
+    }
+
+    const normalized = Array.isArray(value) ? value : [value];
+    this.files = this.multiple ? normalized : normalized.slice(0, 1);
+  }
+
+  private resetNativeInput(): void {
+    if (this.fileInput?.nativeElement) {
+      this.fileInput.nativeElement.value = '';
+    }
+  }
+
+  private handleSelectedFiles(selectedFiles: File[]): void {
+    const nextFiles = this.multiple
+      ? [...this.files, ...selectedFiles]
+      : selectedFiles.slice(0, 1);
+
+    this.files = nextFiles;
+    this.value = this.multiple ? nextFiles : nextFiles[0] ?? null;
+
+    this.onChange(this.value);
+    this.updateErrors();
+    this.onTouched();
+  }
+
+  private updateErrors(): void {
+    if (!this.control) return;
+
+    const errors = this.validateFiles();
+    const nextErrors = this.mergeErrors(errors);
+
+    this.control.setErrors(Object.keys(nextErrors).length ? nextErrors : null);
+  }
+
+  private validateFiles(): Record<string, unknown> {
+    const errors: Record<string, unknown> = {};
+
+    if (this.required && !this.files.length) {
+      errors['required'] = true;
+    }
+
+    if (this.maxFiles && this.files.length > this.maxFiles) {
+      errors['maxFiles'] = true;
+    }
+
+    if (this.maxFileSize && this.files.some(file => file.size > (this.maxFileSize || 0))) {
+      errors['maxFileSize'] = true;
+    }
+
+    if (this.maxTotalSize != null && this.totalSize() > this.maxTotalSize) {
+      errors['maxTotalSize'] = true;
+    }
+
+    if (this.accept && this.files.some(file => !this.isAccepted(file))) {
+      errors['accept'] = true;
+    }
+
+    return errors;
+  }
+
+  private mergeErrors(newErrors: Record<string, unknown>): Record<string, unknown> {
+    const currentErrors = this.control?.errors ?? {};
+    const nextErrors: Record<string, unknown> = {};
+
+    for (const [key, value] of Object.entries(currentErrors)) {
+      if (!this.ownedErrors.has(key)) {
+        nextErrors[key] = value;
+      }
+    }
+
+    for (const [key, value] of Object.entries(newErrors)) {
+      nextErrors[key] = value;
+    }
+
+    return nextErrors;
+  }
+
+  private totalSize(): number {
+    return this.files.reduce((sum, file) => sum + file.size, 0);
+  }
+
+  private isAccepted(file: File): boolean {
+    if (!this.accept) return true;
+
+    const acceptList = this.accept
+      .split(',')
+      .map(item => item.trim().toLowerCase())
+      .filter(Boolean);
+
+    if (!acceptList.length) return true;
+
+    const fileName = file.name.toLowerCase();
+    const fileType = (file.type || '').toLowerCase();
+
+    return acceptList.some(accept => {
+      if (accept.startsWith('.')) {
+        return fileName.endsWith(accept);
+      }
+      if (accept.endsWith('/*')) {
+        const baseType = accept.replace('/*', '');
+        return fileType.startsWith(`${baseType}/`);
+      }
+      return fileType === accept;
+    });
+  }
+}

package/src/lib/components/input/input-interface.ts

@@ -0,0 +1,8 @@
+import { InputTimeMeridiem } from "./input-type";
+
+export interface InputTimeParts {
+  hour?: number;
+  minute?: number;
+  second?: number;
+  meridiem?: InputTimeMeridiem;
+}

package/src/lib/components/input/input-number/input-number.component.html

@@ -0,0 +1,51 @@
+<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__number__container">
+    <button
+      type="button"
+      class="frg-input__number__arrow frg-input__number__arrow--decrement"
+      (click)="decrease()"
+      aria-label="Decrease value"
+    >
+      −
+    </button>
+
+    <input
+      [id]="id"
+      type="number"
+      [placeholder]="placeholder"
+      [required]="required"
+      [disabled]="disabled"
+      [attr.step]="inputStep"
+      [attr.min]="min"
+      [attr.max]="max"
+      [value]="value"
+      (input)="onInput($event)"
+      (blur)="onBlur($event)"
+    />
+
+    <button
+      type="button"
+      class="frg-input__number__arrow frg-input__number__arrow--increment"
+      (click)="increase()"
+      aria-label="Increase value"
+    >
+      +
+    </button>
+  </div>
+</div>
+
+@if (showValidation) {
+  <frg-input-validation
+    [errorList]="errorList"
+    [warningList]="warningList"
+    [isFormInvalid]="hasError"
+  >
+  </frg-input-validation>
+}

package/src/lib/components/input/input-number/input-number.component.scss

@@ -0,0 +1,140 @@
+@use "sass:color";
+@use './../../../../../assets/styles/scss/variables' as *;
+
+:host {
+  display: block;
+  font-family: $input-font-family;
+
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  input[type="number"] {
+    -moz-appearance: textfield;
+    appearance: none;
+  }
+
+  .frg-input {
+    &__wrapper {
+      position: relative;
+      box-sizing: border-box;
+
+      label {
+        font-size: $font-size-xs;
+        color: $input-text-color;
+        padding: $input-padding;
+      }
+
+      &.input-error label {
+        color: $color-danger;
+      }
+
+      &.input-warning label {
+        color: $color-warning;
+      }
+
+      &::before,
+      &::after {
+        content: "";
+        position: absolute;
+        bottom: 0;
+        width: 0;
+        height: 0.125rem;
+        transition: width 0.3s ease, left 0.3s ease, right 0.3s ease;
+      }
+
+      &::before {
+        left: -50%;
+        background: $input-focus-border-color;
+        z-index: 1;
+      }
+
+      &::after {
+        right: -50%;
+        
+        z-index: 2;
+      }
+
+      &:focus-within::before,
+      &.input-error::before,
+      &.input-error::after, 
+      &.input-warning::after {
+        width: 100%;
+      }
+
+      &.input-error::after {
+        background: $color-danger;
+        right: 0;
+      }
+
+      &.input-warning::after {
+        background: $color-warning;
+        right: 0;
+      }
+
+      &:focus-within::before,
+      &.input-error::before,
+      &.input-warning::before {
+        left: 0;
+      }
+
+    }
+
+    &__number {
+      &__container {
+        display: flex;
+        align-items: center;
+        box-sizing: border-box;
+        position: relative;
+        border-bottom: 2px solid $input-border-color;
+        width: 100%;
+        max-width: 100%;
+        overflow: hidden;
+
+        input[type="number"] {
+          flex: 1 1 auto;
+          min-width: 0;
+          height: 100%;
+          border: none;
+          margin: 0;
+          padding: $input-padding;
+          text-align: center;
+          font-size: $input-font-size;
+          font-family: $input-font-family;
+          background: transparent;
+          color: $input-text-color;
+          outline: none;
+
+          &:disabled {
+            background: $input-disabled-background;
+            color: $input-border-color;
+            cursor: not-allowed;
+          }
+        }
+      }
+
+      &__arrow {
+        flex: 0 0 auto;
+        height: 100%;
+        margin: 0;
+        border: none;
+        background: transparent;
+        cursor: pointer;
+        font-size: 1.4rem;
+        color: $input-text-color;
+        user-select: none;
+
+        &:disabled {
+          opacity: 0.45;
+          cursor: not-allowed;
+        }
+
+        &:focus {
+          outline: none;
+        }
+      }
+    }
+  }
+}

package/src/lib/components/input/input-number/input-number.component.spec.ts

@@ -0,0 +1,44 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { InputNumberComponent } from './input-number.component';
+
+describe('InputNumberComponent', () => {
+  let fixture: ComponentFixture<InputNumberComponent>;
+  let component: InputNumberComponent;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [InputNumberComponent]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(InputNumberComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('sets default placeholder for decimal inputs', () => {
+    component.type = 'decimal';
+    component.precision = 2;
+
+    fixture.detectChanges();
+
+    const input = fixture.debugElement.query(By.css('input')).nativeElement as HTMLInputElement;
+    expect(input.placeholder).toBe('0.00');
+  });
+
+  it('increments and decrements value via buttons', () => {
+    component.value = 1;
+
+    fixture.detectChanges();
+
+    const buttons = fixture.debugElement.queryAll(By.css('.frg-input__number__arrow'));
+    buttons[1].nativeElement.click();
+    fixture.detectChanges();
+
+    expect(component.value).toBe(2);
+
+    buttons[0].nativeElement.click();
+    fixture.detectChanges();
+
+    expect(component.value).toBe(1);
+  });
+});