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

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

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