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

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

@@ -1,343 +0,0 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { InputBase } from '../input-base';
-import {
-  DEFAULT_INPUT_NUMBER_ERROR_MESSAGES,
-  DEFAULT_INPUT_NUMBER_WARNING_MESSAGES,
-} from '../input-consts';
-import { InputNumberType } from '../input-type';
-import { normalizeNumber } from '../../../utils/number.utils';
-import { InputRequiredLabelPipe } from '../input.pipe';
-import { InputValidationComponent } from '../input-validation/input-validation.component';
-
-@Component({
-  selector: 'frg-input-number',
-  imports: [InputRequiredLabelPipe, InputValidationComponent],
-  templateUrl: './input-number.component.html',
-  styleUrl: './input-number.component.scss',
-})
-export class InputNumberComponent extends InputBase<number | null> implements OnInit {
-  /**
-   * @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 'number' or 'decimal'.
-   * Defaults to 'number'.
-   */
-  @Input() public type: InputNumberType = 'number';
-
-  /**
-   * Minimum allowed value for the input.
-   */
-  @Input() public min: number | null = null;
-
-  /**
-   * Maximum allowed value for the input.
-   */
-  @Input() public max: number | null = null;
-
-  /**
-   * Increment/decrement step for the input value.
-   */
-  @Input() public step: number | null = null;
-
-  /**
-   * Maximum number of decimal places allowed.
-   */
-  @Input() public precision: number | null = null;
-
-  /**
-   * Enables strict mode for validation.
-   * Defaults to false.
-   */
-  @Input() public validatorStrictMode: boolean = false;
-
-  /** Internal store for warnings */
-  private warnings: Record<string, boolean> = {};
-
-  /**
-   * @inheritdoc
-   */
-  public override ngOnInit(): void {
-    super.ngOnInit();
-    this.initPlaceholder();
-  }
-
-  /**
-   * Returns the step value for the input based on type and precision.
-   */
-  public get inputStep(): number {
-    if (this.step != null) return this.step;
-    if (this.type === 'decimal') return this.precision ? Math.pow(10, -this.precision) : 0.01;
-    return 1;
-  }
-
-  /**
-   * Handles blur event:
-   * - Aligns value to step
-   * - Clamps to min/max/precision
-   * - Runs validation
-   */
-  protected override onBlur(event: FocusEvent): void {
-    const relatedTarget = event.relatedTarget as HTMLElement | null;
-    const isStepButton = relatedTarget?.classList.contains('frg-input__number__arrow');
-
-    if (this.value != null && !isStepButton) {
-      this.validate(this.value);
-      const snappedValue = this.step ? this.alignToStep(this.value, this.inputStep) : this.value;
-      this.value = this.applyClamping(snappedValue);
-    }
-
-    this.onChange(this.value);
-    this.onTouched();
-  }
-
-  /**
-   * Handles input event:
-   * - Normalizes value
-   * - Runs validation
-   */
-  protected override onInput(event: Event): void {
-    const input = event.target as HTMLInputElement;
-    this.value = normalizeNumber(input);
-
-    if (this.value != null) {
-      this.validate(this.value);
-    }
-
-    this.onChange(this.value);
-  }
-
-  /**
-   * @inheritdoc
-   */
-  protected updateView(_value: number | null): void {
-    // Handled by Angular binding
-  }
-
-  /**
-   * @inheritdoc
-   */
-  protected updateDisabledState(_isDisabled: boolean): void {
-    // Handled by Angular binding
-  }
-
-  /**
-   * Returns error messages, excluding warnings.
-   */
-  protected override get errorList(): string[] {
-    if (!this.control?.errors) return [];
-    return Object.keys(this.control.errors)
-      .filter(key => !key.startsWith('warning_'))
-      .map(key => this.errorMessages[key] ?? DEFAULT_INPUT_NUMBER_ERROR_MESSAGES[key] ?? 'Invalid field.');
-  }
-
-  /**
-   * 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_NUMBER_WARNING_MESSAGES[key] || 'Check this value.';
-
-      let limit: number | undefined;
-      switch (key) {
-        case 'min':
-          limit = this.min ?? undefined;
-          break;
-        case 'max':
-          limit = this.max ?? undefined;
-          break;
-        case 'step':
-          limit = this.inputStep;
-          break;
-        case 'precision':
-          limit = this.precision ?? undefined;
-          break;
-        default:
-          limit = undefined;
-      }
-
-      return limit != null ? template.replace('{{limit}}', limit.toString()) : template;
-    });
-  }
-
-  /**
-   * Returns whether any warnings are active.
-   */
-  protected get hasWarning(): boolean {
-    return this.warningList.length > 0;
-  }
-
-  /**
-  * Increase value by step, respecting precision, step alignment and max.
-  */
-  protected increase(): void {
-    const step = this.inputStep;
-    const baseValue = this.value ?? this.min ?? 0;
-
-    let newValue: number;
-
-    if (this.step != null) {
-      const snapped = this.alignToStep(baseValue, step);
-      newValue = snapped === baseValue ? baseValue + step : snapped;
-    } else {
-      newValue = baseValue + step;
-    }
-
-    newValue = +newValue.toFixed(this.precision ?? 12);
-    newValue = this.applyClamping(newValue);
-    this.validate(newValue);
-
-    if (newValue !== this.value) {
-      this.value = newValue;
-      this.onChange(this.value);
-      this.onTouched();
-    }
-  }
-
-  /**
-   * Decrease value by step, respecting precision, step alignment and min.
-   */
-  protected decrease(): void {
-    const step = this.inputStep;
-    const baseValue = this.value ?? this.min ?? 0;
-
-    let newValue: number;
-
-    if (this.step != null) {
-      const snapped = this.alignToStep(baseValue, step);
-      newValue = snapped === baseValue ? baseValue - step : snapped;
-    } else {
-      newValue = baseValue - step;
-    }
-
-    newValue = +newValue.toFixed(this.precision ?? 12);
-    newValue = this.applyClamping(newValue);
-    this.validate(newValue);
-
-    if (newValue !== this.value) {
-      this.value = newValue;
-      this.onChange(this.value);
-      this.onTouched();
-    }
-  }
-
-  /**
-   * Clamps a value to respect precision, min, and max
-   * @param value Value to clamp
-   */
-  private applyClamping(value: number): number {
-    let clampedValue = value;
-
-    if (this.precision != null) {
-      clampedValue = +clampedValue.toFixed(this.precision);
-    }
-    if (this.max != null && clampedValue > this.max) {
-      clampedValue = this.max;
-    }
-    if (this.min != null && clampedValue < this.min) {
-      clampedValue = this.min;
-    }
-
-    return clampedValue;
-  }
-
-  /**
-   * Validates a value against precision, min, max, and step
-   * @param value Value to validate
-   */
-  private validate(value: number): void {
-    if (this.precision != null) {
-      const decimals = this.countDecimals(value);
-      if (decimals > this.precision) {
-        this.addWarning('precision');
-      } else {
-        this.removeWarning('precision');
-      }
-    }
-
-    if (this.max != null && value > this.max) {
-      this.addWarning('max');
-    } else {
-      this.removeWarning('max');
-    }
-
-    if (this.min != null && value < this.min) {
-      this.addWarning('min');
-    } else {
-      this.removeWarning('min');
-    }
-
-    if (this.step != null) {
-      const base = this.min ?? 0;
-      const diff = (value - base) / this.step;
-      if (!Number.isInteger(diff)) {
-        this.addWarning('step');
-      } else {
-        this.removeWarning('step');
-      }
-    }
-  }
-
-  /** Initializes placeholder based on type */
-  private initPlaceholder(): void {
-    if (!this.placeholder) {
-      this.placeholder = this.type === 'decimal' ? (0).toFixed(this.precision ?? 2) : '0';
-    }
-  }
-
-  /**
-   * Adds a warning flag
-   * @param key Warning type
-   */
-  private addWarning(key: string): void {
-    this.warnings[key] = true;
-  }
-
-  /**
-   * Removes a warning flag
-   * @param key Warning type
-   */
-  private removeWarning(key: string): void {
-    delete this.warnings[key];
-  }
-
-  /**
-   * Aligns a value to the nearest multiple of step
-   * @param value Value to align
-   * @param step Step size
-   */
-  private alignToStep(value: number, step: number): number {
-    const base = this.min ?? 0;
-    const offset = value - base;
-    const steps = Math.round(offset / step);
-    return base + steps * step;
-  }
-
-  /**
-   * Counts the number of decimals in a number
-   * @param num Number to check
-   */
-  private countDecimals(num: number): number {
-    if (Math.floor(num) === num) return 0;
-    return num.toString().split('.')[1]?.length ?? 0;
-  }
-}

package/src/lib/components/input/input-radio-group/input-radio-group.component.html

@@ -1,44 +0,0 @@
-<div
-  class="frg-radio-group__wrapper"
-  [class.input-error]="hasError"
-  [class.input-warning]="hasWarning"
-  [ngClass]="{
-    'frg-radio-group__primary': styleType === 'primary',
-    'frg-radio-group__secondary': styleType === 'secondary',
-    'frg-radio-group__tertiary': styleType === 'tertiary',
-    'frg-radio-group__success': styleType === 'success',
-    'frg-radio-group__warning': styleType === 'warning',
-    'frg-radio-group__danger': styleType === 'danger',
-    'frg-radio-group__light': styleType === 'light',
-    'frg-radio-group__dark': styleType === 'dark'
-  }"
->
-  @if(label){
-    <span class="frg-radio-group__label">{{ label | inputRequiredLabel: required }}</span>
-  }
-
-  <div class="frg-radio-group__list">
-    @for (item of items; track item.id) {
-      <label class="frg-radio" [class.disabled]="disabled || item.disabled">
-        <input
-          type="radio"
-          [id]="id + '-' + item.id"
-          [name]="id"
-          [checked]="isSelected(item)"
-          [disabled]="disabled || item.disabled"
-          (change)="selectItem(item, $event)"
-          (blur)="onBlur()"
-        />
-        <span class="frg-radio__label">{{ item.label }}</span>
-      </label>
-    }
-  </div>
-
-  @if(showValidation) {
-    <frg-input-validation
-      [errorList]="errorList"
-      [warningList]="warningList"
-      [isFormInvalid]="hasError"
-    ></frg-input-validation>
-  }
-</div>

package/src/lib/components/input/input-radio-group/input-radio-group.component.scss

@@ -1,139 +0,0 @@
-@use './../../../../../assets/styles/scss/variables' as *;
-
-:host {
-  display: block;
-
-  @mixin radio-group-style($color) {
-    input[type="radio"]::after {
-      background: $color;
-    }
-
-    input[type="radio"]:checked {
-      border-color: $color;
-    }
-
-    input[type="radio"]:focus-visible {
-      box-shadow: 0 0 0 4px rgba($color, 0.14);
-    }
-  }
-
-  .frg-radio-group__wrapper {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-  }
-
-  .frg-radio-group__wrapper.frg-radio-group__primary {
-    @include radio-group-style($color-primary);
-  }
-
-  .frg-radio-group__wrapper.frg-radio-group__secondary {
-    @include radio-group-style($color-secondary);
-  }
-
-  .frg-radio-group__wrapper.frg-radio-group__tertiary {
-    @include radio-group-style($color-tertiary);
-  }
-
-  .frg-radio-group__wrapper.frg-radio-group__success {
-    @include radio-group-style($color-success);
-  }
-
-  .frg-radio-group__wrapper.frg-radio-group__warning {
-    @include radio-group-style($color-warning);
-  }
-
-  .frg-radio-group__wrapper.frg-radio-group__danger {
-    @include radio-group-style($color-danger);
-  }
-
-  .frg-radio-group__wrapper.frg-radio-group__light {
-    @include radio-group-style($color-light);
-  }
-
-  .frg-radio-group__wrapper.frg-radio-group__dark {
-    @include radio-group-style($color-dark);
-  }
-
-  .frg-radio-group__label {
-    font-size: $font-size-xs;
-    color: $input-text-color;
-  }
-
-  .frg-radio-group__list {
-    display: grid;
-    gap: 0.5rem;
-  }
-
-  .frg-radio {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.5rem;
-    cursor: pointer;
-    font-size: $font-size-xs;
-    color: $input-text-color;
-  }
-
-  .input-error .frg-radio-group__label,
-  .input-error .frg-radio {
-    color: $color-danger;
-  }
-
-  .input-warning .frg-radio-group__label,
-  .input-warning .frg-radio {
-    color: $color-warning;
-  }
-
-  input[type="radio"] {
-    appearance: none;
-    -webkit-appearance: none;
-    width: 1rem;
-    height: 1rem;
-    border-radius: 50%;
-    background: transparent;
-    border: 1px solid $input-border-color;
-    display: inline-grid;
-    place-content: center;
-    transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
-    cursor: pointer;
-  }
-
-  input[type="radio"]::after {
-    content: "";
-    width: 0.5rem;
-    height: 0.5rem;
-    border-radius: 50%;
-    background: $color-primary;
-    transform: scale(0);
-    transform-origin: center;
-    transition: transform 140ms ease;
-  }
-
-  input[type="radio"]:checked {
-    background: transparent;
-    border-color: $color-primary;
-  }
-
-  input[type="radio"]:checked::after {
-    transform: scale(1);
-  }
-
-  input[type="radio"]:focus {
-    outline: none;
-  }
-
-  input[type="radio"]:focus-visible {
-    box-shadow: 0 0 0 4px rgba($color-primary, 0.14);
-  }
-
-  input[type="radio"]:disabled {
-    cursor: not-allowed;
-    opacity: 0.65;
-    background: transparent;
-    border-color: $input-disabled-border-color;
-  }
-
-  .frg-radio.disabled {
-    cursor: not-allowed;
-  }
-}

package/src/lib/components/input/input-radio-group/input-radio-group.component.spec.ts

@@ -1,58 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { InputRadioGroupComponent, InputRadioGroupItem } from './input-radio-group.component';
-
-describe('InputRadioGroupComponent', () => {
-  let fixture: ComponentFixture<InputRadioGroupComponent<string>>;
-  let component: InputRadioGroupComponent<string>;
-
-  const items: Array<InputRadioGroupItem<string>> = [
-    { id: 'a', label: 'Option A', value: 'a' },
-    { id: 'b', label: 'Option B', value: 'b' }
-  ];
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [InputRadioGroupComponent]
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(InputRadioGroupComponent<string>);
-    component = fixture.componentInstance;
-    component.items = items;
-  });
-
-  it('selects a value when checked', () => {
-    fixture.detectChanges();
-
-    const input = fixture.debugElement.query(By.css('input[type="radio"]'));
-    input.nativeElement.checked = true;
-    input.nativeElement.dispatchEvent(new Event('change'));
-    fixture.detectChanges();
-
-    expect(component.value).toEqual('a');
-  });
-
-  it('does not select when group is disabled', () => {
-    component.disabled = true;
-
-    fixture.detectChanges();
-
-    const input = fixture.debugElement.query(By.css('input[type="radio"]'));
-    input.nativeElement.checked = true;
-    input.nativeElement.dispatchEvent(new Event('change'));
-
-    expect(component.value).toBeNull();
-  });
-
-  it('does not select when item is disabled', () => {
-    component.items = [{ id: 'a', label: 'Option A', value: 'a', disabled: true }];
-
-    fixture.detectChanges();
-
-    const input = fixture.debugElement.query(By.css('input[type="radio"]'));
-    input.nativeElement.checked = true;
-    input.nativeElement.dispatchEvent(new Event('change'));
-
-    expect(component.value).toBeNull();
-  });
-});

package/src/lib/components/input/input-radio-group/input-radio-group.component.ts

@@ -1,132 +0,0 @@
-import { NgClass } from '@angular/common';
-import { Component, Input } from '@angular/core';
-import { InputBase } from '../input-base';
-import { DEFAULT_INPUT_RADIO_GROUP_ERROR_MESSAGES, DEFAULT_INPUT_RADIO_GROUP_WARNINGS_MESSAGES } from '../input-consts';
-import { InputChoiceStyleType } from '../input-type';
-import { InputValidationComponent } from '../input-validation/input-validation.component';
-import { InputRequiredLabelPipe } from '../input.pipe';
-
-export interface InputRadioGroupItem<T> {
-  id: string;
-  label: string;
-  value: T;
-  disabled?: boolean;
-}
-
-@Component({
-  selector: 'frg-input-radio-group',
-  imports: [NgClass, InputRequiredLabelPipe, InputValidationComponent],
-  templateUrl: './input-radio-group.component.html',
-  styleUrl: './input-radio-group.component.scss',
-})
-export class InputRadioGroupComponent<T> extends InputBase<T> {
-  /**
-   * @inheritdoc
-   */
-  @Input() public override label: string = '';
-  /**
-   * @inheritdoc
-   */
-  @Input() public override required: boolean = false;
-  /**
-   * @inheritdoc
-   */
-  @Input() public override disabled: boolean = false;
-  /**
-   * @inheritdoc
-   */
-  @Input() public override errorMessages: Record<string, string> = {};
-  /**
-   * @inheritdoc
-   */
-  @Input() public override warningMessages: Record<string, string> = {};
-  /**
-   * @inheritdoc
-   */
-  @Input() public override showValidation: boolean = true;
-  /**
-   * Sets the visual style of the radio group.
-   */
-  @Input() public styleType: InputChoiceStyleType = 'primary';
-
-  @Input() public items: Array<InputRadioGroupItem<T>> = [];
-  @Input() public compareWith: (a: T, b: T) => boolean = (a, b) => a === b;
-
-  /**
-   * Selects a radio item value.
-   */
-  public selectItem(item: InputRadioGroupItem<T>, event: Event): void {
-    if (this.disabled || item.disabled) return;
-
-    const input = event.target as HTMLInputElement;
-    if (!input.checked) return;
-
-    this.value = item.value;
-    this.onChange(this.value);
-    this.onTouched();
-  }
-
-  /**
-   * Checks if the item is selected.
-   */
-  public isSelected(item: InputRadioGroupItem<T>): boolean {
-    if (this.value === null || this.value === undefined) return false;
-    return this.compareWith(this.value, item.value);
-  }
-
-  /**
-   * @inheritdoc
-   */
-  public override onBlur(): void {
-    this.onTouched();
-  }
-
-  /**
-   * @inheritdoc
-   */
-  protected updateView(_value: T | 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).map(key => {
-      if (this.errorMessages[key]) {
-        return this.errorMessages[key];
-      }
-      return DEFAULT_INPUT_RADIO_GROUP_ERROR_MESSAGES[key] || 'Invalid field.';
-    });
-  }
-
-  /**
-   * Returns warning messages. Consumers may pass arbitrary warnings via `warningMessages`.
-   * Falls back to DEFAULT_INPUT_RADIO_GROUP_WARNINGS_MESSAGES or a generic message.
-   */
-  protected override get warningList(): string[] {
-    return Object.keys(this.warningMessages).map(key => {
-      return (
-        this.warningMessages[key] ||
-        DEFAULT_INPUT_RADIO_GROUP_WARNINGS_MESSAGES[key] ||
-        ''
-      );
-    });
-  }
-
-  /**
-   * Returns whether any warnings are active.
-   */
-  protected get hasWarning(): boolean {
-    return this.warningList.length > 0;
-  }
-}