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

package/src/lib/components/input/input-text/input-text.component.spec.ts

@@ -1,55 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { InputTextComponent } from './input-text.component';
-
-describe('InputTextComponent', () => {
-  let fixture: ComponentFixture<InputTextComponent>;
-  let component: InputTextComponent;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [InputTextComponent]
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(InputTextComponent);
-    component = fixture.componentInstance;
-  });
-
-  it('renders label when provided', () => {
-    component.label = 'Username';
-
-    fixture.detectChanges();
-
-    const label = fixture.debugElement.query(By.css('label'));
-    expect(label.nativeElement.textContent).toContain('Username');
-  });
-
-  it('toggles password visibility', () => {
-    component.type = 'password';
-
-    fixture.detectChanges();
-
-    const input = fixture.debugElement.query(By.css('input')).nativeElement as HTMLInputElement;
-    expect(input.type).toBe('password');
-
-    const toggleBtn = fixture.debugElement.query(By.css('.frg-input__toggle-password'));
-    toggleBtn.nativeElement.click();
-    fixture.detectChanges();
-
-    expect(input.type).toBe('text');
-  });
-
-  it('updates value on input', () => {
-    const onChangeSpy = jasmine.createSpy('onChange');
-    component.registerOnChange(onChangeSpy);
-
-    fixture.detectChanges();
-
-    const input = fixture.debugElement.query(By.css('input')).nativeElement as HTMLInputElement;
-    input.value = 'hello';
-    input.dispatchEvent(new Event('input'));
-
-    expect(component.value).toBe('hello');
-    expect(onChangeSpy).toHaveBeenCalledWith('hello');
-  });
-});

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

@@ -1,215 +0,0 @@
-import { NgTemplateOutlet } from '@angular/common';
-import { Component, Input, OnInit } from '@angular/core';
-import { Validators } from '@angular/forms';
-import { InputBase } from '../input-base';
-import { DEFAULT_INPUT_TEXT_ERROR_MESSAGES, DEFAULT_INPUT_TEXT_WARNINGS_MESSAGES } from '../input-consts';
-import { InputTextType } from '../input-type';
-import { InputValidationComponent } from '../input-validation/input-validation.component';
-import { InputRequiredLabelPipe } from '../input.pipe';
-import { phoneNumberValidator, strictEmailValidator, strictPhoneNumberValidator, strictUrlValidator, urlValidator } from './input-text-validators';
-
-@Component({
-  selector: 'frg-input-text',
-  imports: [InputRequiredLabelPipe, NgTemplateOutlet, InputValidationComponent],
-  templateUrl: './input-text.component.html',
-  styleUrl: './input-text.component.scss',
-})
-export class InputTextComponent extends InputBase<string> 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 'text', 'password', 'email', 'tel', etc.
-   * Defaults to 'text'.
-   *
-   * @see InputTextType
-   */
-  @Input() public type: InputTextType = 'text';
-  /**
-   * Enables strict mode for email validation.
-   * When set to true, the email validator will use a more stringent pattern.
-   * Defaults to false.
-   */
-  @Input() public validatorStrictMode: boolean = false;
-
-  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];
-      }
-
-      if (key === 'minlength' && errors[key]?.requiredLength) {
-        return `Minimum length is ${errors[key].requiredLength} characters.`;
-      }
-
-      if (key === 'maxlength' && errors[key]?.requiredLength) {
-        return `Maximum length is ${errors[key].requiredLength} characters.`;
-      }
-
-      return DEFAULT_INPUT_TEXT_ERROR_MESSAGES[key] || 'Invalid field.';
-    });
-  }
-
-  /**
-   * Handles the blur event on the input element.
-   * Marks the control as touched.
-   */
-  public override onBlur(): void {
-    this.onTouched();
-  }
-
-  /**
-   * Handles the input event on the input element.
-   * Updates the value and notifies the form control.
-   */
-  public override onInput(event: Event): void {
-    const input = event.target as HTMLInputElement;
-    this.value = input.value;
-    this.onChange(this.value);
-  }
-
-  /**
-   * @inheritdoc
-   */
-  public override ngOnInit(): void {
-    super.ngOnInit();
-    if (this.type === 'email' && this.control) {
-      this.validateEmail();
-    }
-    if (this.type === 'tel' && this.control) {
-      this.validatePhoneNumber();
-    }
-    if (this.type === 'url' && this.control){
-      this.validateUrl();
-    }
-  }
-
-  /**
-   * @inheritdoc
-   */
-  protected updateView(_value: string | null): void {
-    // Handled by Angular binding
-  }
-
-  /**
-   * @inheritdoc
-   */
-  protected updateDisabledState(_isDisabled: boolean): void {
-    // Handled by Angular binding
-  }
-
-  /**
-   * Indicates whether the password is visible or hidden.
-   *
-   * Used only when the input type is 'password'.
-   */
-  protected showPassword: boolean = false;
-
-  /**
-   * Determines the actual input type to be used in the template.
-   * If the type is 'password', it toggles between 'text' and 'password'
-   * based on the showPassword property.
-   *
-   * @returns The input type as a string.
-   */
-  public get inputType(): string {
-    if (this.type === 'password') {
-      return this.showPassword ? 'text' : 'password';
-    }
-    return this.type;
-  }
-
-  /**
-   * Returns warning messages. Consumers may pass arbitrary warnings via `warningMessages`.
-   * Falls back to DEFAULT_INPUT_TEXT_WARNINGS_MESSAGES or a generic message.
-   */
-  protected override get warningList(): string[] {
-    return Object.keys(this.warningMessages).map(key => {
-      return (
-        this.warningMessages[key] ||
-        DEFAULT_INPUT_TEXT_WARNINGS_MESSAGES[key] ||
-        ''
-      );
-    });
-  }
-
-  /**
-   * Returns whether any warnings are active.
-   */
-  protected get hasWarning(): boolean {
-    return this.warningList.length > 0;
-  }
-
-  /**
-   * Toggles the visibility of the password input field.
-   * This method switches the input type between 'text' and 'password'.
-   *
-   * Used only when the input type is 'password'.
-   */
-  protected toggleShowPassword(): void {
-    this.showPassword = !this.showPassword;
-  }
-
-  /**
-   * Adds email validator to the control if the type is 'email'.
-   * This ensures that the input value is a valid email address.
-   */
-  private validateEmail(): void {
-    const existingValidators = this.control?.validator
-      ? [this.control.validator]
-      : [];
-
-    this.control?.setValidators([
-      ...existingValidators,
-      this.validatorStrictMode ? strictEmailValidator() : Validators.email
-    ]);
-
-    this.control?.updateValueAndValidity();
-  }
-
-  private validatePhoneNumber(): void {
-    const existingValidators = this.control?.validator
-      ? [this.control.validator]
-      : [];
-
-    this.control?.setValidators([
-      ...existingValidators,
-      this.validatorStrictMode ? strictPhoneNumberValidator() : phoneNumberValidator()
-    ]);
-
-    this.control?.updateValueAndValidity();
-  }
-
-  private validateUrl(): void {
-    const existingValidators = this.control?.validator
-      ? [this.control.validator]
-      : [];
-
-    this.control?.setValidators([
-      ...existingValidators,
-      this.validatorStrictMode ? strictUrlValidator() : urlValidator()
-    ]);
-
-    this.control?.updateValueAndValidity();
-  }
-}

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

@@ -1,42 +0,0 @@
-import { AbstractControl, ValidationErrors, ValidatorFn } from "@angular/forms";
-import { parseTimeToMinutes } from "../../../utils/date.utils";
-
-export function minTime(min: string): ValidatorFn {
-  return (control: AbstractControl): ValidationErrors | null => {
-    const value = control.value as string | null;
-    if (!value) return null;
-
-    const minMinutes = parseTimeToMinutes(min);
-    const valueMinutes = parseTimeToMinutes(value);
-
-    if (minMinutes === null || valueMinutes === null) {
-      return { invalidFormat: true };
-    }
-
-    if (valueMinutes < minMinutes) {
-      return { min: true };
-    }
-
-    return null;
-  };
-}
-
-export function maxTime(max: string): ValidatorFn {
-  return (control: AbstractControl): ValidationErrors | null => {
-    const value = control.value as string | null;
-    if (!value) return null;
-
-    const maxMinutes = parseTimeToMinutes(max);
-    const valueMinutes = parseTimeToMinutes(value);
-
-    if (maxMinutes === null || valueMinutes === null) {
-      return { invalidFormat: true };
-    }
-
-    if (valueMinutes > maxMinutes) {
-      return { max: true };
-    }
-
-    return null;
-  };
-}

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

@@ -1,92 +0,0 @@
-<div class="frg-input__wrapper"
-  [class.input-error]="hasError"
-  [class.input-warning]="hasWarning"
->
-  @if(label){
-    <label [for]="id + '-full'">{{ label | inputRequiredLabel: required }}</label>
-  }
-  <div class="frg-input__field">
-    @if(format.includes('HH') || format.includes('hh')) {
-      <ng-container *ngTemplateOutlet="timeControl; context:{partial:'hour', min:minHour, max:maxHour, placeholder: format.includes('HH') ? 'HH' : 'hh'}"></ng-container>
-    }
-    
-    @if(format.includes('mm')) {
-      <span class="colon-seprator">:</span>
-      <ng-container *ngTemplateOutlet="timeControl; context:{partial:'minute', min:minMinute, max:maxMinute, placeholder:'mm'}"></ng-container>
-    }
-  
-    @if(format.includes('ss')) {
-      <span class="colon-seprator">:</span>
-      <ng-container *ngTemplateOutlet="timeControl; context:{partial:'second', min:minSecond, max:maxSecond, placeholder:'ss'}"></ng-container>
-    }
-
-    @if(format.includes('a')) {
-      <div class="frg-input__time__container frg-input__time__meridiem">
-        <input
-          [id]="id + '-meridiem'"
-          [attr.data-partialTime]="'meridiem'"
-          type="checkbox"
-          tabindex="0"
-          role="switch"
-          [checked]="formatTime(value, 'meridiem') === 'PM'"
-          aria-checked="{{ formatTime(value, 'meridiem') === 'PM' }}"
-          placeholder="AM/PM"
-          [required]="required"
-          [disabled]="disabled"
-          (blur)="onBlur($event)"
-          (focus)="onFocus($event)"
-          (change)="onInput($event)"
-          (keydown.enter)="onKeydown($event)"
-        />
-      </div>
-      <span class="focus-line"></span>
-
-    }
-
-    <input type="text" [id]="id + '-full'" [value]="value" hidden />
-  </div>
-
-  @if(showValidation) {
-    <frg-input-validation
-      [errorList]="errorList"
-      [warningList]="warningList"
-      [isFormInvalid]="hasError"
-    ></frg-input-validation>
-  }
-</div>
-
-<ng-template #timeControl let-partial="partial" let-min="min" let-max="max" let-placeholder="placeholder">
-  <div class="frg-input__time__container" [ngClass]="'frg-input__time__' + partial">
-     <button
-      type="button"
-      class="frg-input__time__arrow frg-input__time__arrow--increment"
-      (click)="increase(partial)"
-      aria-label="Increase value"
-    >
-      <span class="fas fa-chevron-up"></span>
-    </button>
-    <input
-      [id]="id + '-' + partial"
-      [attr.data-partialTime]="partial"
-      type="number"
-      [placeholder]="placeholder"
-      [min]="min"
-      [max]="max"
-      [required]="required"
-      [disabled]="disabled"
-      [value]="formatTime(value, partial) !== placeholder ? formatTime(value, partial) : ''"
-      (blur)="onBlur($event)"
-      (focus)="onFocus($event)"
-      (input)="onInput($event)"
-    />
-    <span class="focus-line"></span>
-    <button
-      type="button"
-      class="frg-input__time__arrow frg-input__time__arrow--decrement"
-      (click)="decrease(partial)"
-      aria-label="Decrease value"
-    >
-      <span class="fas fa-chevron-down"></span>
-    </button>
-  </div>
-</ng-template>

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

@@ -1,191 +0,0 @@
-@use "sass:color";
-@use './../../../../../assets/styles/scss/variables' as *;
-
-:host {
-  display: block;
-
-  input::-webkit-outer-spin-button,
-  input::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-
-  .frg-input {
-    &__wrapper {
-      position: relative;
-      box-sizing: border-box;
-
-      label {
-        font-size: $font-size-xs;
-        color: $input-text-color;
-        display: block;
-        padding: $input-padding;
-      }
-
-      &.input-error label {
-        color: $color-danger;
-      }
-
-      &.input-warning label {
-        color: $color-warning;
-      }
-    }
-
-    &__field {
-      display: inline-flex;
-      justify-content: center;
-      align-items: center;
-
-      input[type="number"],
-      input[type="number"]:focus,
-      input[type="number"]:focus-visible {
-        border: none;
-        outline: none;
-      }
-
-      input[type="number"] {
-        background: transparent;
-        text-align: center;
-        padding: 0.5rem 0;
-        letter-spacing: .1rem;
-        font-size: $font-size-md;
-        font-weight: 600;
-        color: $color-dark-soft;
-        display: block;
-      }
-
-      .partial-label {
-        display: block;
-        font-size: $font-size-xs;
-        text-transform: capitalize;
-        width: 100%;
-        text-align: center;
-        color: $color-dark-soft;
-      }
-
-      .colon-seprator {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-size: $font-size-md;
-        font-weight: 600;
-      }
-    }
-
-    &__time {
-      &__container {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-
-        .focus-line {
-          display: block;
-          width: 50%;
-          margin: 0 auto;
-          height: 2px;
-          background-color: $color-primary;
-          transform: scaleX(0);
-          transform-origin: left center;
-          transition: transform 0.2s ease, background-color 0.2s ease;
-        }
-
-        &:focus-within .focus-line {
-          transform: scaleX(1);
-        }
-
-        .frg-input__wrapper.input-error & .focus-line {
-          background-color: $color-danger;
-          transform: scaleX(1);
-        }
-
-        .frg-input__wrapper.input-warning & .focus-line {
-          background-color: $color-warning;
-          transform: scaleX(1);
-        }
-      }
-
-      &__meridiem {
-        position: relative;
-        width: 3.5rem;
-        height: 1.5rem;
-
-        input[type="checkbox"] {
-          appearance: none;
-          -webkit-appearance: none;
-          width: 100%;
-          height: 100%;
-          border-radius: 0.25rem;
-          background-color: $color-light-soft;
-          cursor: pointer;
-          position: relative;
-          overflow: hidden;
-          transition: background-color 0.25s ease;
-
-          &:focus {
-            outline: none;
-          }
-
-          &:focus-visible {
-            outline-offset: 0.25rem;
-            outline: 2px solid $color-dark-neutral;
-            box-shadow: 0 0 0 2px rgba($color-primary, 0.2);
-
-            .frg-input__wrapper.input-error & {
-              outline-color: $color-danger;
-              box-shadow: 0 0 0 2px rgba($color-danger, 0.2);
-            }
-
-            .frg-input__wrapper.input-warning & {
-              outline-color: $color-warning;
-              box-shadow: 0 0 0 2px rgba($color-warning, 0.2);
-            }
-          }
-
-          &:before,
-          &:after {
-            content: "AM";
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            font-size: $font-size-md;
-            font-weight: 600;
-            color: $color-dark-neutral;
-            transition: transform 0.25s ease, opacity 0.25s ease;
-          }
-
-          &:after {
-            content: "PM";
-            opacity: 0;
-            transform: translate(-50%, 150%);
-            color: $color-light;
-          }
-
-          &:checked {
-            background-color: $color-primary;
-
-            &:before {
-              transform: translate(-50%, -150%);
-              opacity: 0;
-            }
-
-            &:after {
-              transform: translate(-50%, -50%);
-              opacity: 1;
-            }
-          }
-        }
-      }
-
-      &__arrow {
-        background: transparent;
-        color: $color-dark-neutral;
-        border: none;
-        display: block;
-        width: 100%;
-        padding: 0 0.5rem;
-        cursor: pointer;
-      }
-    }
-  }
-}

package/src/lib/components/input/input-time/input-time.component.spec.ts

@@ -1,39 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { InputTimeComponent } from './input-time.component';
-
-describe('InputTimeComponent', () => {
-  let fixture: ComponentFixture<InputTimeComponent>;
-  let component: InputTimeComponent;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [InputTimeComponent]
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(InputTimeComponent);
-    component = fixture.componentInstance;
-  });
-
-  it('renders hour and minute inputs', () => {
-    fixture.detectChanges();
-
-    const hour = fixture.debugElement.query(By.css('input[id$="-hour"]'));
-    const minute = fixture.debugElement.query(By.css('input[id$="-minute"]'));
-
-    expect(hour).toBeTruthy();
-    expect(minute).toBeTruthy();
-  });
-
-  it('increments hour when clicking the first increment button', () => {
-    component.value = '10:15';
-
-    fixture.detectChanges();
-
-    const buttons = fixture.debugElement.queryAll(By.css('.frg-input__time__arrow--increment'));
-    buttons[0].nativeElement.click();
-    fixture.detectChanges();
-
-    expect(component.value).toBe('11:15');
-  });
-});