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

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

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

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

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

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

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

@@ -0,0 +1,39 @@
+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');
+  });
+});