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

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

@@ -1,691 +0,0 @@
-import { NgClass, NgTemplateOutlet } from '@angular/common';
-import { Component, Input } from '@angular/core';
-import { Validators } from '@angular/forms';
-import { TimeFormat } from '../../../types/common.types';
-import { buildTimeFormatRegex, convertStringToTime, formatTimeToString } from '../../../utils/date.utils';
-import { InputBase } from '../input-base';
-import { DEFAULT_INPUT_TIME_ERROR_MESSAGES, DEFAULT_INPUT_TIME_WARNINGS_MESSAGES } from '../input-consts';
-import { InputTimeMeridiem, InputTimePartial, InputTimeType } from '../input-type';
-import { InputValidationComponent } from '../input-validation/input-validation.component';
-import { InputRequiredLabelPipe } from '../input.pipe';
-import { maxTime, minTime } from './input-time-validators';
-import { InputTimeParts } from '../input-interface';
-
-@Component({
-  selector: 'frg-input-time',
-  imports: [InputRequiredLabelPipe, InputValidationComponent, NgClass, NgTemplateOutlet],
-  templateUrl: './input-time.component.html',
-  styleUrl: './input-time.component.scss',
-})
-export class InputTimeComponent extends InputBase<string> {
-
-  /**
- * @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: InputTimeType = 'time';
-  /**
-   * Minimum year selectable in the calendar
-   */
-  @Input() public minTime: string = '00:00:00';
-  /**
-   * Maximum year selectable in the calendar
-   */
-  @Input() public maxTime: string = '23:59:59';
-  /**
-   * The format of time
-   */
-  @Input() public format: TimeFormat = 'HH:mm';
-  /**
-   * 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;
-
-  /**
-   * 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 {
-    return this.type;
-  }
-
-  /**
-   * Minimum hour based on minTime
-   */
-  public get minHour(): number {
-    return Number(this.minTime.split(':')[0] || 0);
-  }
-
-  /**
-   * Maximum hour based on maxTime and format
-   */
-  public get maxHour(): number {
-    return Number(this.maxTime.split(':')[0] || (this.format.includes('HH') ? 23 : 12));
-  }
-
-  /**
-   * Minimum minute allowed based on `minTime`
-   */
-  public get minMinute(): number {
-    return Number(this.minTime.split(':')[1] || 0);
-  }
-
-  /**
-   * Maximum minute allowed based on `maxTime`
-   */
-  public get maxMinute(): number {
-    return Number(this.maxTime.split(':')[1] || 59);
-  }
-
-  /**
-   * Minimum second allowed based on `minTime`
-   */
-  public get minSecond(): number {
-    const parts = this.minTime.split(':');
-    return parts[2] ? Number(parts[2]) : 0;
-  }
-
-  /**
-   * Maximum second allowed based on `maxTime`
-   */
-  public get maxSecond(): number {
-    const parts = this.maxTime.split(':');
-    return parts[2] ? Number(parts[2]) : 59;
-  }
-
-  /** Internal store for warnings */
-  private warnings: Record<string, boolean> = {};
-
-  /**
-   * @inheritdoc
-   */
-  public override ngOnInit(): void {
-    super.ngOnInit();
-    this.initPlaceholder();
-    this.initValidators();
-  }
-
-  public onKeydown(event: Event) {
-    if (event) {
-      event.preventDefault();
-    }
-
-    const checkbox = document.getElementById(this.id + '-meridiem') as HTMLInputElement;
-    if (!checkbox) return;
-
-    checkbox.checked = !checkbox.checked;
-
-    const fakeEvent = { target: checkbox } as unknown as Event;
-    this.onInput(fakeEvent);
-  }
-
-  /**
-   * @inheritdoc
-   */
-  public override onBlur(event: FocusEvent): void {
-    const target = event.target as HTMLInputElement;
-    const partialTime = target.dataset['partialtime'] as InputTimePartial;
-    const inputValue = target.value.trim() || null;
-
-    this.value = inputValue ? this.mergePartialInput(partialTime, inputValue) : '';
-    this.validate(this.value);
-    this.updateInputsFromValue();
-    this.onTouched();
-    this.onChange(this.value);
-  }
-
-  /**
-   * @inheritdoc
-   */
-  public override onInput(event: Event): void {
-    const target = event.target as HTMLInputElement;
-    const partialTime = target.dataset['partialtime'] as InputTimePartial;
-
-    let inputValue: string | null;
-    if (partialTime === 'meridiem') {
-      inputValue = target.checked ? 'PM' : 'AM';
-    } else {
-      inputValue = target.value.trim() || null;
-    }
-
-    this.value = this.mergePartialInput(partialTime, inputValue);
-    this.updateInputsFromValue();
-    this.onTouched();
-    this.onChange(this.value);
-  }
-
-  /**
-   * Decrements a specific part of the time (hour, minute, or second)
-   * and updates the input value accordingly.
-   *
-   * @param partialTime - The time part to decrement: 'hour', 'minute', or 'second'.
-   */
-  protected decrease(partialTime: InputTimePartial): void {
-    const valueParts = this.parseValueToParts();
-
-    switch (partialTime) {
-      case 'hour':
-        valueParts.hour = this.decrementHour(valueParts.hour ?? this.minHour);
-        break;
-      case 'minute':
-        valueParts.minute = this.decrementMinute(valueParts.minute ?? this.minMinute);
-        break;
-      case 'second':
-        valueParts.second = this.decrementSecond(valueParts.second ?? this.minSecond);
-        break;
-    }
-
-    this.value = this.formatPartsToTimeString(valueParts);
-    this.updateInputsFromValue();
-    this.onTouched();
-    this.onChange(this.value);
-  }
-
-  /**
-   * Format value for input display
-   * @param value Date value
-   * @returns Formatted time string
-   */
-  protected formatTime(value: string | null, partialTime?: InputTimePartial): string {
-    if (value) {
-      return formatTimeToString(value, this.format, partialTime);
-    }
-
-    return '';
-  }
-
-  /**
-   * Increments a specific part of the time (hour, minute, or second)
-   * and updates the input value accordingly.
-   *
-   * @param partialTime - The time part to increment: 'hour', 'minute', or 'second'.
-   */
-  protected increase(partialTime: InputTimePartial): void {
-    const valueParts = this.parseValueToParts();
-
-    switch (partialTime) {
-      case 'hour':
-        valueParts.hour = this.incrementHour(valueParts.hour);
-        break;
-      case 'minute':
-        valueParts.minute = this.incrementMinute(valueParts.minute);
-        break;
-      case 'second':
-        valueParts.second = this.incrementSecond(valueParts.second);
-        break;
-    }
-
-    this.value = this.formatPartsToTimeString(valueParts);
-    this.updateInputsFromValue();
-    this.onTouched();
-    this.onChange(this.value);
-  }
-
-  /**
-   * @inheritdoc
-   */
-  protected updateView(_value: string | 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)
-      .filter(key => !key.startsWith('warning_'))
-      .map(key => {
-        if (this.errorMessages[key]) {
-          return this.errorMessages[key];
-        }
-        let template = this.errorMessages[key] || DEFAULT_INPUT_TIME_ERROR_MESSAGES[key] || 'Invalid field.';
-
-        switch (key) {
-          case 'min':
-            template = template.replace('{{time}}', formatTimeToString(this.minTime, this.format));
-            break;
-          case 'max':
-            template = template.replace('{{time}}', formatTimeToString(this.maxTime, this.format));
-            break;
-        }
-
-        return template;
-      });
-  }
-
-  /**
-   * 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_TIME_WARNINGS_MESSAGES[key] || 'Check this value.';
-
-      let replacement: string | undefined;
-
-      switch (key) {
-        case 'format':
-          replacement = this.format;
-          break;
-        case 'min':
-          replacement = formatTimeToString(this.minTime, this.format);
-          break;
-        case 'max':
-          replacement = formatTimeToString(this.maxTime, this.format);
-          break;
-      }
-
-      if (replacement != null) {
-        const placeholder = key === 'format' ? '{{format}}' : '{{limit}}';
-        return template.replace(placeholder, replacement.toString());
-      }
-
-      return template;
-    });
-  }
-
-  /**
-   * Returns whether any warnings are active.
-   */
-  protected get hasWarning(): boolean {
-    return this.warningList.length > 0;
-  }
-
-  /**
-   * Adds a warning flag
-   * @param key Warning key
-   */
-  private addWarning(key: string): void {
-    this.warnings[key] = true;
-  }
-
-  /**
-   * Builds a formatted time string from the given time parts.
-   * - Undefined numeric parts are represented as "undefined".
-   * - Meridiem is always included if the format includes 'a'.
-   *
-   * @param parts Object containing hour, minute, second, and optional meridiem
-   * @returns Formatted time string according to the current format
-   */
-  private formatPartsToTimeString(parts: InputTimeParts): string {
-    const segments: string[] = [];
-
-    if (this.format.includes('HH') || this.format.includes('hh')) {
-      segments.push(parts.hour !== undefined ? String(parts.hour).padStart(2, '0') : 'undefined');
-    }
-    if (this.format.includes('mm')) {
-      segments.push(parts.minute !== undefined ? String(parts.minute).padStart(2, '0') : 'undefined');
-    }
-    if (this.format.includes('ss')) {
-      segments.push(parts.second !== undefined ? String(parts.second).padStart(2, '0') : 'undefined');
-    }
-
-    const timeString = segments.join(':');
-
-    if (this.format.includes('a')) {
-      const meridiem = parts.meridiem || 'AM';
-      return `${timeString} ${meridiem}`;
-    }
-
-    return timeString;
-  }
-
-  /**
-   * Clamps a numeric value between a minimum and maximum.
-   * @param value The number to clamp.
-   * @param min Minimum allowed value.
-   * @param max Maximum allowed value.
-   * @returns The clamped number, or undefined if input was undefined.
-   */
-  private clamp(value: number | undefined, min: number, max: number): number | undefined {
-    if (value === undefined) return undefined;
-    return Math.max(min, Math.min(max, value));
-  }
-
-  /**
-   * Decrement hour based on format (12h or 24h)
-   * @param hour Current hour
-   * @returns Decremented hour
-   */
-  private decrementHour(hour: number): number {
-    if (this.format.includes('a')) {
-      hour--;
-      if (hour < 1) {
-        hour = 12;
-        this.toggleMeridiem();
-      }
-      return hour;
-    } else {
-      hour--;
-      if (hour < this.minHour) return this.maxHour;
-      return hour;
-    }
-  }
-
-  /**
-   * Decrement minute with wrapping
-   * @param minute Current minute
-   * @returns Decremented minute
-   */
-  private decrementMinute(minute: number): number {
-    minute--;
-    if (minute < this.minMinute) return this.maxMinute;
-    return minute;
-  }
-
-  /**
-   * Decrement second with wrapping
-   * @param second Current second
-   * @returns Decremented second
-   */
-  private decrementSecond(second: number): number {
-    second--;
-    if (second < this.minSecond) return this.maxSecond;
-    return second;
-  }
-
-  /**
-   * Returns the current time parts extracted from the component's value.
-   * Numeric parts are converted to numbers; meridiem defaults to 'AM' if format includes 'a'.
-   * @returns An object containing hour, minute, second, and meridiem (if applicable).
-   */
-  private getCurrentParts(): InputTimeParts {
-    return {
-      hour: this.parseNumberOrUndefined(this.formatTime(this.value, 'hour')),
-      minute: this.parseNumberOrUndefined(this.formatTime(this.value, 'minute')),
-      second: this.parseNumberOrUndefined(this.formatTime(this.value, 'second')),
-      meridiem: this.format.includes('a')
-        ? ((this.formatTime(this.value, 'meridiem') as InputTimeMeridiem) || 'AM')
-        : undefined,
-    };
-  }
-
-  /**
-   * Initialize the placeholder based on the time format
-   */
-  private initPlaceholder() {
-    this.placeholder = 'HH:mm';
-  }
-
-  /**
-   * Increment hour based on format (12h or 24h)
-   * @param hour Current hour
-   * @returns Incremented hour
-   */
-  private incrementHour(hour: number | undefined): number {
-    if (hour === undefined) {
-      return Number(this.format.includes('a'));
-    }
-    if (this.format.includes('a')) {
-      hour++;
-      if (hour > 12) {
-        hour = 1;
-        this.toggleMeridiem();
-      }
-      return hour;
-    } else {
-      hour++;
-      if (hour > this.maxHour) return this.minHour;
-      return hour;
-    }
-  }
-
-  /**
-   * Increment minute with wrapping
-   * @param minute Current minute
-   * @returns Incremented minute
-   */
-  private incrementMinute(minute: number | undefined): number {
-    if (minute === undefined) {
-      return 0;
-    }
-    minute++;
-    if (minute > this.maxMinute) return this.minMinute;
-    return minute;
-  }
-
-  /**
-   * Increment second with wrapping
-   * @param second Current second
-   * @returns Incremented second
-   */
-  private incrementSecond(second: number | undefined): number {
-    if (second === undefined) {
-      return 0;
-    }
-    second++;
-    if (second > this.maxSecond) return this.minSecond;
-    return second;
-  }
-
-  /**
-   * Initialize validators based on inputs
-   */
-  private initValidators(): void {
-    if (this.control) {
-      const validators = [];
-
-      if (this.required) {
-        validators.push(Validators.required);
-      }
-
-      if (this.minTime) {
-        validators.push(minTime(this.minTime));
-      }
-
-      if (this.maxTime) {
-        validators.push(maxTime(this.maxTime));
-      }
-
-      this.control.setValidators(validators);
-      this.control.updateValueAndValidity();
-    }
-  }
-
-  /**
-   * Merges a partial time input into the current value and returns the resulting full time string.
-   * @param partial The time part being updated ('hour', 'minute', 'second', 'meridiem').
-   * @param partialValue The new value for the specified part.
-   * @returns The merged full time string.
-   */
-  private mergePartialInput(partial: InputTimePartial, partialValue: string | null): string {
-    const parts = this.getCurrentParts();
-    this.setPartialValue(parts, partial, partialValue);
-    return this.formatPartsToTimeString(parts);
-  }
-
-  /**
-   * Converts a string to a number or returns undefined if the value is invalid.
-   * @param value The string to parse.
-   * @returns The number value, or undefined if input is null, 'undefined', or NaN.
-   */
-  private parseNumberOrUndefined(value: string | null): number | undefined {
-    if (!value || value === 'undefined') return undefined;
-    const n = Number(value);
-    return isNaN(n) ? undefined : n;
-  }
-
-  /**
-   * Parse the current value to its components
-   * @returns An object containing hour, minute, second, and meridiem (if applicable)
-   */
-  private parseValueToParts(): InputTimeParts {
-    const result: InputTimeParts = {};
-    if (!this.value) return result;
-
-    let coreValue = this.value.trim();
-    let meridiem: InputTimeMeridiem | undefined;
-
-    const meridiemMatch = /\s?(AM|PM)$/i.exec(coreValue);
-    if (meridiemMatch) {
-      meridiem = meridiemMatch[1].toUpperCase() as InputTimeMeridiem;
-      coreValue = coreValue.replace(/\s?(AM|PM)$/i, '').trim();
-    }
-
-    const segments = coreValue.split(':').map(s => (s === 'undefined' ? undefined : s));
-
-    const tokenMap: [string, keyof InputTimeParts][] = [
-      ['HH', 'hour'],
-      ['hh', 'hour'],
-      ['mm', 'minute'],
-      ['ss', 'second'],
-    ];
-
-    let index = 0;
-    for (const [token, key] of tokenMap) {
-      if (this.format.includes(token)) {
-        const segment = segments[index++];
-        result[key as 'hour' | 'minute' | 'second'] =
-          segment !== undefined ? Number(segment) : undefined;
-      }
-    }
-
-    if (this.format.includes('a')) {
-      result.meridiem = meridiem;
-    }
-
-    return result;
-  }
-
-  /**
-   * Updates a specific part of a time parts object with a new partial value and clamps numeric values.
-   * @param parts The time parts object to update.
-   * @param partial The part to update ('hour', 'minute', 'second', 'meridiem').
-   * @param partialValue The new value for the part.
-   */
-  private setPartialValue(parts: InputTimeParts, partial: InputTimePartial, partialValue: string | null): void {
-    switch (partial) {
-      case 'hour':
-        parts.hour = partialValue !== null ? Number(partialValue) : undefined;
-        break;
-      case 'minute':
-        parts.minute = partialValue !== null ? Number(partialValue) : 0;
-        break;
-      case 'second':
-        parts.second = partialValue !== null ? Number(partialValue) : 0;
-        break;
-      case 'meridiem':
-        parts.meridiem = partialValue === 'AM' || partialValue === 'PM' ? partialValue : 'AM';
-        break;
-    }
-
-    parts.hour = this.clamp(parts.hour, this.minHour, this.maxHour);
-    parts.minute = this.clamp(parts.minute, this.minMinute, this.maxMinute);
-    parts.second = this.clamp(parts.second, this.minSecond, this.maxSecond);
-  }
-
-  /**
-   * Toggle the meridiem (AM/PM) in the current value
-   * This is used when incrementing hours in 12-hour format.
-   */
-  private toggleMeridiem(): void {
-    if (!this.value) return;
-    const parts = this.value.split(' ');
-    if (parts[1] === 'AM') parts[1] = 'PM';
-    else parts[1] = 'AM';
-    this.value = parts.join(' ');
-  }
-
-  /**
-   * Update individual input fields based on the current full time value
-   * This ensures that each part (hour, minute, second, meridiem) reflects the current value
-   * and is properly formatted.
-   */
-  private updateInputsFromValue(): void {
-    const hoursInput = document.getElementById(this.id + '-hour') as HTMLInputElement;
-    const minutesInput = document.getElementById(this.id + '-minute') as HTMLInputElement;
-    const secondsInput = document.getElementById(this.id + '-second') as HTMLInputElement;
-    const meridiemInput = document.getElementById(this.id + '-meridiem') as HTMLInputElement;
-
-    const safeValue = (part: InputTimePartial): string => {
-      const formatted = this.formatTime(this.value, part);
-      return formatted && !['HH', 'mm', 'ss'].includes(formatted) ? formatted : '';
-    };
-
-    if (hoursInput) hoursInput.value = safeValue('hour');
-    if (minutesInput) minutesInput.value = safeValue('minute');
-    if (secondsInput) secondsInput.value = safeValue('second');
-    if (meridiemInput) meridiemInput.value = safeValue('meridiem');
-  }
-
-  /**
-    * Validate the input value against the specified format
-    * @param value Input value
-    */
-  private validate(value: string): void {
-    this.removeWarning('format');
-    this.removeWarning('min');
-    this.removeWarning('max');
-
-    if (!value) return;
-
-    if (this.format) {
-      const regex = buildTimeFormatRegex(this.format);
-      if (!regex.test(value)) {
-        this.addWarning('format');
-        return;
-      }
-    }
-
-    const valueSeconds = convertStringToTime(value, this.format);
-    if (valueSeconds === null) {
-      this.addWarning('invalidFormat');
-      return;
-    }
-
-    const minSeconds = this.minTime ? convertStringToTime(this.minTime, this.format) : null;
-    const maxSeconds = this.maxTime ? convertStringToTime(this.maxTime, this.format) : null;
-
-    if (minSeconds !== null && valueSeconds < minSeconds) {
-      this.addWarning('min');
-    }
-    if (maxSeconds !== null && valueSeconds > maxSeconds) {
-      this.addWarning('max');
-    }
-  }
-
-  /**
-   * Remove a warning flag
-   * @param key Warning key
-   */
-  private removeWarning(key: string): void {
-    delete this.warnings[key];
-  }
-}