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

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

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

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

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

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

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