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

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

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

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

@@ -1,51 +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__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

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

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