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

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

@@ -0,0 +1,410 @@
+import { Component, ElementRef, HostListener, Input, OnInit, ViewChild } from '@angular/core';
+import { NgClass } from '@angular/common';
+import { InputBase } from '../input-base';
+import { InputRequiredLabelPipe } from '../input.pipe';
+import { InputValidationComponent } from '../input-validation/input-validation.component';
+import { DEFAULT_INPUT_SLIDER_ERROR_MESSAGES, DEFAULT_INPUT_SLIDER_WARNING_MESSAGES } from '../input-consts';
+import { InputChoiceStyleType, InputSliderSize } from '../input-type';
+
+type InputSliderValue = number | [number, number];
+type SliderHandle = 'single' | 'min' | 'max';
+
+@Component({
+  selector: 'frg-input-slider',
+  imports: [InputRequiredLabelPipe, InputValidationComponent, NgClass],
+  templateUrl: './input-slider.component.html',
+  styleUrl: './input-slider.component.scss',
+})
+export class InputSliderComponent extends InputBase<InputSliderValue> 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> = {};
+  /**
+   * @inheritdoc
+   */
+  @Input() public override warningMessages: Record<string, string> = {};
+
+  /**
+   * Minimum slider value.
+   */
+  @Input() public min: number = 0;
+  /**
+   * Maximum slider value.
+   */
+  @Input() public max: number = 100;
+  /**
+   * Step interval for the slider.
+   */
+  @Input() public step: number = 1;
+  /**
+   * Enable dual-handle range mode.
+   */
+  @Input() public range: boolean = false;
+  /**
+   * Show tick marks along the track.
+   */
+  @Input() public showTicks: boolean = false;
+  /**
+   * Optional tick interval (defaults to step).
+   */
+  @Input() public tickStep: number | null = null;
+  /**
+   * Maximum number of ticks to render.
+   */
+  @Input() public maxTicks: number = 50;
+  /**
+   * Show tooltip on hover/drag.
+   */
+  @Input() public showTooltip: boolean = true;
+  /**
+   * Show numeric value(s) above the slider.
+   */
+  @Input() public showValue: boolean = false;
+  /**
+   * Slider size.
+   */
+  @Input() public size: InputSliderSize = 'medium';
+  /**
+   * Slider color style.
+   */
+  @Input() public styleType: InputChoiceStyleType = 'primary';
+
+  @ViewChild('track', { static: true }) private track!: ElementRef<HTMLDivElement>;
+
+  private currentValue: number = 0;
+  private currentRange: [number, number] = [0, 0];
+  private dragging: boolean = false;
+  private activeHandle: SliderHandle = 'single';
+  private activePointerId: number | null = null;
+
+  /** Internal store for warnings */
+  private warnings: Record<string, boolean> = {};
+
+  public override ngOnInit(): void {
+    super.ngOnInit();
+    this.syncFromValue();
+  }
+
+  protected updateView(_value: InputSliderValue | null): void {
+    this.syncFromValue();
+  }
+
+  protected 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 => {
+      return this.errorMessages[key] ?? DEFAULT_INPUT_SLIDER_ERROR_MESSAGES[key] ?? 'Invalid field.';
+    });
+  }
+
+  protected override get warningList(): string[] {
+    return Object.keys(this.warnings).map(key => {
+      return (
+        this.warningMessages[key] ??
+        DEFAULT_INPUT_SLIDER_WARNING_MESSAGES[key] ??
+        ''
+      );
+    });
+  }
+
+  protected get hasWarning(): boolean {
+    return this.warningList.length > 0;
+  }
+
+  protected get displayValue(): string {
+    return this.formatValue(this.currentValue);
+  }
+
+  protected get displayRangeMin(): string {
+    return this.formatValue(this.currentRange[0]);
+  }
+
+  protected get displayRangeMax(): string {
+    return this.formatValue(this.currentRange[1]);
+  }
+
+  protected get rangeMinValue(): number {
+    return this.currentRange[0];
+  }
+
+  protected get rangeMaxValue(): number {
+    return this.currentRange[1];
+  }
+
+  protected get singleValue(): number {
+    return this.currentValue;
+  }
+
+  protected get minPercent(): number {
+    return this.valueToPercent(this.currentRange[0]);
+  }
+
+  protected get maxPercent(): number {
+    return this.valueToPercent(this.currentRange[1]);
+  }
+
+  protected get singlePercent(): number {
+    return this.valueToPercent(this.currentValue);
+  }
+
+  protected get rangeWidth(): number {
+    return this.maxPercent - this.minPercent;
+  }
+
+  protected get showRange(): boolean {
+    return this.range;
+  }
+
+  protected get ticks(): number[] {
+    if (!this.showTicks) return [];
+    const step = this.tickStep ?? this.step;
+    if (step <= 0 || this.max <= this.min) return [];
+
+    const count = Math.floor((this.max - this.min) / step);
+    if (count <= this.maxTicks) {
+      return Array.from({ length: count + 1 }, (_, i) => this.min + i * step);
+    }
+
+    const interval = (this.max - this.min) / this.maxTicks;
+    return Array.from({ length: this.maxTicks + 1 }, (_, i) => this.min + i * interval);
+  }
+
+  protected get sliderClasses(): Record<string, boolean> {
+    return {
+      [`frg-slider--${this.size}`]: true,
+      [`frg-slider--${this.styleType}`]: true,
+    };
+  }
+
+  protected isHandleActive(handle: SliderHandle): boolean {
+    return this.dragging && this.activeHandle === handle;
+  }
+
+  protected onTrackPointerDown(event: PointerEvent): void {
+    if (this.disabled) return;
+    event.preventDefault();
+
+    const value = this.valueFromPointer(event);
+    if (this.range) {
+      const distMin = Math.abs(value - this.currentRange[0]);
+      const distMax = Math.abs(value - this.currentRange[1]);
+      this.activeHandle = distMin <= distMax ? 'min' : 'max';
+      this.setRangeValue(this.activeHandle, value, true);
+    } else {
+      this.activeHandle = 'single';
+      this.setSingleValue(value, true);
+    }
+
+    this.startDragging(event);
+  }
+
+  protected onHandlePointerDown(event: PointerEvent, handle: SliderHandle): void {
+    if (this.disabled) return;
+    event.preventDefault();
+    event.stopPropagation();
+
+    this.activeHandle = handle;
+    this.startDragging(event);
+  }
+
+  protected onHandleKeydown(event: KeyboardEvent, handle: SliderHandle): void {
+    if (this.disabled) return;
+
+    const step = this.safeStep;
+    let nextValue: number | null = null;
+
+    switch (event.key) {
+      case 'ArrowLeft':
+      case 'ArrowDown':
+        nextValue = this.getHandleValue(handle) - step;
+        break;
+      case 'ArrowRight':
+      case 'ArrowUp':
+        nextValue = this.getHandleValue(handle) + step;
+        break;
+      case 'PageDown':
+        nextValue = this.getHandleValue(handle) - step * 10;
+        break;
+      case 'PageUp':
+        nextValue = this.getHandleValue(handle) + step * 10;
+        break;
+      case 'Home':
+        nextValue = this.min;
+        break;
+      case 'End':
+        nextValue = this.max;
+        break;
+      default:
+        return;
+    }
+
+    event.preventDefault();
+    const snapped = this.snapValue(nextValue);
+
+    if (this.range) {
+      this.setRangeValue(handle, snapped, true);
+    } else {
+      this.setSingleValue(snapped, true);
+    }
+  }
+
+  @HostListener('document:pointermove', ['$event'])
+  protected onDocumentPointerMove(event: PointerEvent): void {
+    if (!this.dragging || (this.activePointerId !== null && event.pointerId !== this.activePointerId)) return;
+    event.preventDefault();
+
+    const value = this.valueFromPointer(event);
+    if (this.range) {
+      this.setRangeValue(this.activeHandle, value, true);
+    } else {
+      this.setSingleValue(value, true);
+    }
+  }
+
+  @HostListener('document:pointerup', ['$event'])
+  protected onDocumentPointerUp(event: PointerEvent): void {
+    if (!this.dragging || (this.activePointerId !== null && event.pointerId !== this.activePointerId)) return;
+    event.preventDefault();
+
+    this.dragging = false;
+    this.activePointerId = null;
+    this.onTouched();
+  }
+
+  private syncFromValue(): void {
+    if (this.range) {
+      const next = this.normalizeRangeValue(this.value);
+      this.currentRange = next;
+    } else {
+      const next = this.normalizeSingleValue(this.value);
+      this.currentValue = next;
+    }
+  }
+
+  private normalizeSingleValue(value: InputSliderValue | null): number {
+    const raw = typeof value === 'number' ? value : Array.isArray(value) ? value[0] : this.min;
+    return this.snapValue(raw);
+  }
+
+  private normalizeRangeValue(value: InputSliderValue | null): [number, number] {
+    let start = this.min;
+    let end = this.max;
+
+    if (Array.isArray(value) && value.length === 2) {
+      start = value[0];
+      end = value[1];
+    } else if (typeof value === 'number') {
+      start = value;
+      end = this.max;
+    }
+
+    start = this.snapValue(start);
+    end = this.snapValue(end);
+
+    if (start > end) {
+      return [end, start];
+    }
+
+    return [start, end];
+  }
+
+  private setSingleValue(value: number, emit: boolean): void {
+    const next = this.snapValue(value);
+    if (next === this.currentValue) return;
+
+    this.currentValue = next;
+    this.value = next;
+    if (emit) {
+      this.onChange(this.value);
+      this.onTouched();
+    }
+  }
+
+  private setRangeValue(handle: SliderHandle, value: number, emit: boolean): void {
+    let [start, end] = this.currentRange;
+    const next = this.snapValue(value);
+
+    if (handle === 'min') {
+      start = Math.min(next, end);
+    } else if (handle === 'max') {
+      end = Math.max(next, start);
+    }
+
+    if (start === this.currentRange[0] && end === this.currentRange[1]) return;
+
+    this.currentRange = [start, end];
+    this.value = [start, end];
+    if (emit) {
+      this.onChange(this.value);
+      this.onTouched();
+    }
+  }
+
+  private startDragging(event: PointerEvent): void {
+    this.dragging = true;
+    this.activePointerId = event.pointerId ?? null;
+  }
+
+  private valueFromPointer(event: PointerEvent): number {
+    const rect = this.track.nativeElement.getBoundingClientRect();
+    const ratio = (event.clientX - rect.left) / rect.width;
+    const clamped = Math.min(1, Math.max(0, ratio));
+    return this.min + clamped * (this.max - this.min);
+  }
+
+  protected valueToPercent(value: number): number {
+    if (this.max === this.min) return 0;
+    return ((value - this.min) / (this.max - this.min)) * 100;
+  }
+
+  private snapValue(value: number): number {
+    const clamped = Math.min(this.max, Math.max(this.min, value));
+    const step = this.safeStep;
+    const steps = Math.round((clamped - this.min) / step);
+    const snapped = this.min + steps * step;
+    return this.roundToPrecision(snapped);
+  }
+
+  private roundToPrecision(value: number): number {
+    const precision = this.stepPrecision;
+    if (precision <= 0) return Math.round(value);
+    return Number(value.toFixed(precision));
+  }
+
+  private formatValue(value: number): string {
+    const precision = this.stepPrecision;
+    if (precision <= 0) return value.toString();
+    return value.toFixed(precision);
+  }
+
+  private get safeStep(): number {
+    return this.step > 0 ? this.step : 1;
+  }
+
+  private get stepPrecision(): number {
+    const text = this.safeStep.toString();
+    const index = text.indexOf('.');
+    return index >= 0 ? text.length - index - 1 : 0;
+  }
+
+  private getHandleValue(handle: SliderHandle): number {
+    if (!this.range) return this.currentValue;
+    return handle === 'min' ? this.currentRange[0] : this.currentRange[1];
+  }
+}

package/src/lib/components/input/input-text/input-text-validators.ts

@@ -0,0 +1,67 @@
+import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';
+
+export function strictEmailValidator(): ValidatorFn {
+  return (control: AbstractControl): ValidationErrors | null => {
+    const value = control.value;
+    if (!value) {
+      return null;
+    }
+    const strictPattern = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/;
+    return strictPattern.test(value) ? null : { strictEmail: true };
+  };
+}
+
+//#region [Tel validators]
+export function phoneNumberValidator(): ValidatorFn {
+  return (control: AbstractControl): ValidationErrors | null => {
+    const value = control.value;
+
+    if (!value) {
+      return null;
+    }
+
+    const pattern = /^[+\d\s-]{7,15}$/;
+    return pattern.test(value) ? null : { phone: true };
+  };
+}
+
+export function strictPhoneNumberValidator(): ValidatorFn {
+  return (control: AbstractControl): ValidationErrors | null => {
+    const value = control.value?.trim();
+
+    if (!value) {
+      return null;
+    }
+
+    const strictTelPattern = /^\+[1-9]\d{7,14}$/;
+    return strictTelPattern.test(value) ? null : { strictPhone: true };
+  };
+}
+//#endregion
+
+//#region [Url validator]
+export function urlValidator(): ValidatorFn {
+  return (control: AbstractControl): ValidationErrors | null => {
+    const value = control.value;
+
+    if (!value) {
+      return null;
+    }
+    const pattern = /^(https?:\/\/)?([\w-]+(\.[\w-]+)+)([\w.,@?^=%&:/~+#-]*[\w@?^=%&/~+#-])?$/;
+    return pattern.test(control.value) ? null : { url: true };
+  };
+}
+
+export function strictUrlValidator(): ValidatorFn {
+  return (control: AbstractControl): ValidationErrors | null => {
+    const value = control.value;
+
+    if (!value) {
+      return null;
+    }
+
+    const pattern = /^(https?:\/\/)([\w-]+(\.[\w-]+)+)?$/;
+    return pattern.test(value) ? null : { strictUrl: true };
+  };
+}
+//#endregion

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

@@ -0,0 +1,71 @@
+<div class="frg-input__wrapper"
+  [class.input-error]="hasError"
+  [class.input-warning]="hasWarning"
+>
+  @if(label){
+    <label [for]="id">{{ label | inputRequiredLabel: required }}</label>
+  }
+
+  <input
+    [id]="id"
+    [type]="inputType"
+    [placeholder]="placeholder"
+    [required]="required"
+    [disabled]="disabled"
+    [value]="value"
+    (input)="onInput($event)"
+    (blur)="onBlur()"
+  />
+
+  @if(type === 'password') {
+    <ng-container *ngTemplateOutlet="passwordToggleTemplate"></ng-container>
+  }
+  @else if(type === 'email') {
+    <ng-container *ngTemplateOutlet="emailExtraTemplate"></ng-container>
+  }
+  @else if(type === 'tel') {
+    <ng-container *ngTemplateOutlet="phoneExtraTemplate"></ng-container>
+  }
+  @else if(type === 'url') {
+    <ng-container *ngTemplateOutlet="urlExtraTemplate"></ng-container>
+  }
+
+</div>
+
+  @if(showValidation) {
+    <frg-input-validation
+      [errorList]="errorList"
+      [warningList]="warningList"
+      [isFormInvalid]="hasError"
+    >
+    </frg-input-validation>
+  }
+
+<!-- Templates -->
+<ng-template #passwordToggleTemplate>
+  <button type="button" class="frg-input__toggle-password" (click)="toggleShowPassword()">
+    @if(showPassword){
+      <span class="far fa-eye-slash"></span>
+    } @else {
+      <span class="far fa-eye"></span>
+    }
+  </button>
+</ng-template>
+
+<ng-template #emailExtraTemplate>
+  <div class="frg-input__email-container">
+    <span class="far fa-envelope"></span>
+  </div>
+</ng-template>
+
+<ng-template #phoneExtraTemplate>
+  <div class="frg-input__phone-container">
+    <span class="fas fa-mobile-screen"></span>
+  </div>
+</ng-template>
+
+<ng-template #urlExtraTemplate>
+  <div class="frg-input__url-container">
+    <span class="fas fa-link"></span>
+  </div>
+</ng-template>

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

@@ -0,0 +1,118 @@
+@use "sass:color";
+@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%;
+
+      input {
+        padding: $input-padding;
+        border: none;
+        width: 100%;
+        border-bottom: 2px solid $input-border-color;
+        font-family: $input-font-family;
+        background: transparent;
+        transition: border-color 0.3s;
+
+        &:focus {
+          outline: none;
+        }
+
+        &:has(+ .frg-input__toggle-password) {
+          padding: 0.25rem 1.75rem 0.25rem 0.5rem;
+        }
+
+        &:has(+ .frg-input__email-container) {
+          padding: 0.25rem 1.75rem 0.25rem 0.5rem;
+        }
+
+        &:has(+ .frg-input__phone-container) {
+          padding: 0.25rem 1.75rem 0.25rem 0.5rem;
+        }
+
+        &:has(+ .frg-input__url-container) {
+          padding: 0.25rem 1.75rem 0.25rem 0.5rem;
+        }
+      }
+
+      &.input-error input {
+        border-bottom-color: $color-danger;
+      }
+
+      &.input-error label {
+        color: $color-danger;
+      }
+
+      &::before {
+        content: "";
+        position: absolute;
+        bottom: 0;
+        left: -50%;
+        width: 0;
+        height: 0.125rem;
+        background: $input-focus-border-color;
+        transition: width 0.3s ease, left 0.3s ease;
+      }
+
+      &:has(input:focus)::before {
+        width: 100%;
+        left: 0;
+      }
+
+      &.input-error::before {
+        width: 100%;
+        left: 0;
+      }
+
+      &::after {
+        content: "";
+        position: absolute;
+        bottom: 0;
+        right: -50%;
+        width: 0;
+        height: 0.125rem;
+        background: $color-danger;
+        transition: width 0.3s ease, right 0.3s ease;
+      }
+
+      &.input-error::after {
+        background: $color-danger;
+        width: 100%;
+        right: 0;
+      }
+
+    }
+
+    &__toggle-password,
+    &__email-container,
+    &__phone-container,
+    &__url-container {
+      position: absolute;
+      top: 50%;
+      right: 0.25rem;
+      background: transparent;
+      border: none;
+      font-size: 1rem;
+      color: $input-text-color;
+      padding: 0;
+    }
+
+    &__toggle-password {
+      cursor: pointer;
+    }
+  }
+}