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

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

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

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

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

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