carriera-intern 0.0.0

package/projects/carriera-intern-components/src/app/components/input/directives/number-format.directive.ts

@@ -0,0 +1,442 @@
+import {
+  Directive,
+  ElementRef,
+  HostListener,
+  input,
+  OnInit,
+} from '@angular/core';
+import { NumberFormatPipe } from '../../../pipes/number-format.pipe';
+
+@Directive({
+  selector: '[appNumberFormat]',
+  providers: [NumberFormatPipe],
+})
+export class NumberFormatDirective implements OnInit {
+  /**
+   * Input property to enable or disable the number formatting.
+   * Defaults to true, meaning formatting is active by default.
+   */
+  appNumberFormat = input<boolean>(true);
+
+  /**
+   *
+   */
+  max = input<number>();
+
+  /**
+   * Input property to enable or disable the number formatting.
+   * Defaults to true, meaning formatting is active by default.
+   */
+  isNumberFormattingDisabled = input<boolean>(false);
+
+  /**
+   * Input property to enable or disable the number formatting.
+   * Defaults to true, meaning formatting is active by default.
+   */
+  disableDecimals = input<boolean>(false);
+
+  prefix = input<string>('');
+
+  /**
+   * Stores the unformatted, "real" numeric value of the input.
+   * This is the value that should be used for calculations or form submissions,
+   * as opposed to the formatted display value.
+   */
+  private realValue: string = '';
+
+  constructor(private el: ElementRef<HTMLInputElement>) {}
+
+  /**
+   * Lifecycle hook that is called after Angular has initialized all data-bound
+   * properties of a directive.
+   * If number formatting is enabled, it sets up the initial formatting.
+   */
+  ngOnInit(): void {
+    if (this.appNumberFormat()) {
+      this.setupNumberFormatting();
+    }
+  }
+
+  /**
+   * Initializes the number formatting on the input element.
+   * It extracts the initial numeric value from the input's current value
+   * and then updates the display with the formatted version.
+   */
+  private setupNumberFormatting(): void {
+    const input = this.el.nativeElement;
+    // Extract numeric value from whatever might be in the input initially
+    this.realValue = this.extractNumericValue(input.value || '');
+    this.updateDisplayValue(); // Format and display it
+  }
+
+  /**
+   * HostListener for the 'input' event on the host element.
+   * This triggers whenever the user types or pastes content into the input.
+   * It extracts the numeric value from the current input, updates the
+   * display with the formatted number, restores the cursor position,
+   * and dispatches a 'realValueChange' event with the unformatted numeric value.
+   * @param event - The InputEvent object.
+   */
+  @HostListener('input', ['$event'])
+  onInput(event: InputEvent): void {
+    if (!this.appNumberFormat()) return; // Do nothing if formatting is disabled
+
+    const input = this.el.nativeElement;
+    const cursorPosition = input.selectionStart || 0;
+    const oldValue = input.value;
+
+    this.realValue = this.extractNumericValue(oldValue);
+    if (this.max()) {
+      const numericValue = Number(this.realValue);
+      const maxValue = this.max() || 0;
+      if (numericValue > maxValue) {
+        // Cap the value at max instead of just removing last character
+        this.realValue = maxValue.toString();
+      }
+    }
+    if (this.disableDecimals()) {
+      this.realValue = this.realValue.split('.')[0];
+    }
+
+    this.updateDisplayValue();
+    const newValue = input.value;
+    const newCursorPos = this.calculateCursorPosition(
+      cursorPosition,
+      oldValue,
+      newValue,
+    );
+    input.setSelectionRange(newCursorPos, newCursorPos);
+
+    this.dispatchRealValueChange(); // Notify parent components of the raw value change
+  }
+
+  /**
+   * HostListener for the 'cut' event.
+   * Prevents the default cut behavior to manually handle the value change.
+   * It reconstructs the value after the cut, extracts the numeric part,
+   * updates the display, sets the cursor, and dispatches the real value.
+   * @param event - The ClipboardEvent object.
+   */
+  @HostListener('cut', ['$event'])
+  onCut(event: ClipboardEvent): void {
+    if (!this.appNumberFormat()) return;
+
+    const input = this.el.nativeElement;
+    const start = input.selectionStart || 0;
+    const end = input.selectionEnd || 0;
+
+    if (start !== end) {
+      // If there's a selection
+      event.preventDefault(); // Prevent default cut
+      const cutText = input.value.slice(start, end);
+      event.clipboardData?.setData('text', this.extractNumericValue(cutText)); // Put numeric part on clipboard
+
+      // Reconstruct value without the cut part
+      const oldValue = input.value;
+      const valueAfterCut =
+        input.value.slice(0, start) + input.value.slice(end);
+      this.realValue = this.extractNumericValue(valueAfterCut);
+
+      this.updateDisplayValue();
+      const newValue = input.value;
+      const newCursorPos = this.calculateCursorPosition(
+        start,
+        oldValue,
+        newValue,
+      );
+      input.setSelectionRange(newCursorPos, newCursorPos);
+      this.dispatchRealValueChange();
+    }
+  }
+
+  /**
+   * HostListener for the 'copy' event.
+   * Prevents the default copy behavior if there's a selection to ensure
+   * that the copied text is the unformatted numeric value of the selection,
+   * rather than the potentially formatted display text.
+   * @param event - The ClipboardEvent object.
+   */
+  @HostListener('copy', ['$event'])
+  onCopy(event: ClipboardEvent): void {
+    if (!this.appNumberFormat()) return;
+
+    const input = this.el.nativeElement;
+    const start = input.selectionStart || 0;
+    const end = input.selectionEnd || 0;
+
+    if (start !== end) {
+      // If there's a selection
+      event.preventDefault(); // Prevent default copy
+      const selectedText = input.value.slice(start, end);
+      // Copy the underlying numeric value of the selection
+      event.clipboardData?.setData(
+        'text',
+        this.extractNumericValue(selectedText),
+      );
+    }
+  }
+
+  /**
+   * HostListener for the 'keydown' event.
+   * Filters key presses to allow only digits, a single decimal point,
+   * and control keys (Backspace, Arrows, Tab, etc.).
+   * This helps maintain a valid numeric input format before the 'input' event fires.
+   * @param event - The KeyboardEvent object.
+   */
+  @HostListener('keydown', ['$event'])
+  onKeydown(event: KeyboardEvent): void {
+    if (!this.appNumberFormat()) return;
+
+    const controlKeys = [
+      'Backspace',
+      'Delete',
+      'ArrowLeft',
+      'ArrowRight',
+      'ArrowUp',
+      'ArrowDown',
+      'Tab',
+      'Enter',
+      'Escape',
+      'Home',
+      'End',
+    ];
+
+    // Allow control keys, and modifier key combinations (Ctrl+A, Ctrl+C, etc.)
+    if (
+      controlKeys.includes(event.key) ||
+      event.ctrlKey ||
+      event.metaKey ||
+      event.altKey
+    ) {
+      return; // Don't prevent default for these
+    }
+
+    // Allow a single decimal point if not already present in the realValue
+    if (
+      event.key === '.' &&
+      !this.realValue.includes('.') &&
+      !this.disableDecimals()
+    ) {
+      // If the input is empty or realValue is empty, prepend '0' before the decimal
+      if (this.realValue === '' || this.realValue === '0') {
+        event.preventDefault();
+        this.realValue = '0.';
+        this.updateDisplayValue();
+        this.setCursorToEnd();
+        this.dispatchRealValueChange();
+      }
+      return;
+    }
+
+    // Check if typing a digit would exceed max
+    if (/^\d$/.test(event.key) && this.max()) {
+      const input = this.el.nativeElement;
+      const start = input.selectionStart || 0;
+      const end = input.selectionEnd || 0;
+      const currentValue = input.value;
+
+      // Simulate what the value would be after this keypress
+      const beforeSelection = currentValue.slice(0, start);
+      const afterSelection = currentValue.slice(end);
+      const simulatedValue = beforeSelection + event.key + afterSelection;
+
+      // Extract numeric value from simulated result
+      const simulatedNumericValue = this.extractNumericValue(simulatedValue);
+      const simulatedNumber = Number(simulatedNumericValue);
+
+      // Prevent if it would exceed max
+      if (simulatedNumber > (this.max() || 0)) {
+        event.preventDefault();
+        return;
+      }
+    }
+
+    // Prevent non-digit keys
+    if (!/^\d$/.test(event.key)) {
+      event.preventDefault();
+    }
+  }
+
+  /**
+   * Extracts a clean numeric string from a given value.
+   * It removes any non-digit characters except for a single decimal point.
+   * It also ensures that there's only one decimal point and limits
+   * the decimal part to two digits.
+   * @param value - The string value to clean.
+   * @returns A string representing the extracted numeric value.
+   */
+  private extractNumericValue(value: string): string {
+    // Remove all non-digit characters except for the decimal point
+    value = value.toString();
+    let cleanValue = value.replace(/[^\d.]/g, '');
+
+    // Handle multiple decimal points: keep only the first one
+    const parts = cleanValue.split('.');
+    if (parts.length > 1) {
+      const integerPart = parts[0];
+      const decimalPart = parts.slice(1).join(''); // Join back any subsequent parts
+      cleanValue = `${integerPart}.${decimalPart}`;
+    }
+
+    // Limit decimal part to two digits
+    if (cleanValue.includes('.')) {
+      const [integerPart, decimalPart] = cleanValue.split('.');
+      const cappedDecimalPart = decimalPart ? decimalPart.substring(0, 2) : '';
+      cleanValue = `${integerPart}.${cappedDecimalPart}`;
+    }
+
+    return cleanValue;
+  }
+
+  /**
+   * Updates the input element's display value with the formatted version
+   * of the current `realValue`.
+   * It uses the `NumberFormatPipe` for formatting.
+   */
+  private updateDisplayValue(): void {
+    const input = this.el.nativeElement;
+    let formattedValue = '';
+
+    if (this.realValue === '') {
+      input.value = '';
+      return;
+    }
+
+    let [integerPart, decimalPart] = this.realValue.split('.');
+
+    if (integerPart.length > 1) {
+      integerPart = integerPart.replace(/^0+/, '') || '0';
+    }
+
+    // If number formatting is disabled, skip thousand separators and decimals
+    if (this.isNumberFormattingDisabled()) {
+      formattedValue = integerPart;
+
+      // Still add decimal part if it exists and formatting is not disabled
+      if (this.realValue.endsWith('.')) {
+        formattedValue = formattedValue + '.';
+      } else if (decimalPart !== undefined) {
+        formattedValue = formattedValue + '.' + decimalPart;
+      }
+    } else {
+      // Use full formatting with NumberFormatPipe
+      const formattedInteger = new NumberFormatPipe().transform(integerPart);
+
+      if (this.realValue.endsWith('.')) {
+        formattedValue = formattedInteger + '.';
+      } else if (decimalPart !== undefined) {
+        formattedValue = formattedInteger + '.' + decimalPart;
+      } else {
+        formattedValue = formattedInteger;
+      }
+    }
+
+    if (this.prefix()) {
+      formattedValue = this.prefix() + formattedValue;
+    }
+
+    input.value = formattedValue;
+  }
+
+  /**
+   * Sets the cursor position to the end of the input field.
+   * This is typically called after the input value is reformatted.
+   */
+  private setCursorToEnd(): void {
+    const input = this.el.nativeElement;
+    const length = input.value.length;
+    input.setSelectionRange(length, length);
+  }
+
+  /**
+   * Calculates the correct cursor position after formatting.
+   * Accounts for added or removed thousand separators and prefix.
+   * @param oldCursorPos - The cursor position before formatting
+   * @param oldValue - The value before formatting
+   * @param newValue - The value after formatting
+   * @returns The new cursor position
+   */
+  private calculateCursorPosition(
+    oldCursorPos: number,
+    oldValue: string,
+    newValue: string,
+  ): number {
+    const prefixLength = this.prefix().length;
+
+    // Remove prefix from both values for comparison
+    const oldValueWithoutPrefix = oldValue.startsWith(this.prefix())
+      ? oldValue.substring(prefixLength)
+      : oldValue;
+    const newValueWithoutPrefix = newValue.startsWith(this.prefix())
+      ? newValue.substring(prefixLength)
+      : newValue;
+
+    // Adjust cursor position relative to prefix
+    let adjustedOldCursorPos = oldCursorPos - prefixLength;
+    if (adjustedOldCursorPos < 0) adjustedOldCursorPos = 0;
+
+    // Count digits before cursor in old value (excluding prefix)
+    const beforeCursor = oldValueWithoutPrefix.substring(
+      0,
+      adjustedOldCursorPos,
+    );
+    const digitsBeforeCursor = (beforeCursor.match(/[\d.]/g) || []).length;
+
+    // Find position in new value where we have the same number of digits
+    let digitCount = 0;
+    let newCursorPos = prefixLength;
+
+    for (let i = 0; i < newValueWithoutPrefix.length; i++) {
+      if (/[\d.]/.test(newValueWithoutPrefix[i])) {
+        digitCount++;
+        if (digitCount >= digitsBeforeCursor) {
+          newCursorPos = prefixLength + i + 1;
+          break;
+        }
+      }
+    }
+
+    // If we haven't set position yet (edge case), set to end
+    if (digitCount < digitsBeforeCursor) {
+      newCursorPos = newValue.length;
+    }
+
+    return newCursorPos;
+  }
+
+  /**
+   * Dispatches a custom event named 'realValueChange' from the host element.
+   * The event's `detail` property contains the unformatted `realValue`.
+   * This allows parent components or other directives to listen for changes
+   * to the underlying numeric value.
+   */
+  private dispatchRealValueChange(): void {
+    let number = Number(this.realValue) + '';
+    if (this.realValue === '') number = '';
+    const customEvent = new CustomEvent('realValueChange', {
+      bubbles: true, // Allows event to bubble up the DOM
+      composed: true, // Allows event to cross Shadow DOM boundaries
+      detail: number,
+    });
+    this.el.nativeElement.dispatchEvent(customEvent);
+  }
+
+  /**
+   * Public method to get the current unformatted "real" numeric value.
+   * @returns The real numeric value as a string.
+   */
+  getRealValue(): string {
+    return this.realValue;
+  }
+
+  /**
+   * Public method to set the "real" numeric value from outside the directive.
+   * It extracts the numeric part from the provided value and updates the
+   * input's display with the formatted version.
+   * @param value - The new value to set (can be formatted or unformatted).
+   */
+  setRealValue(value: string): void {
+    this.realValue = this.extractNumericValue(value || '');
+    this.updateDisplayValue();
+  }
+}

package/projects/carriera-intern-components/src/app/components/input/directives/password.directive.spec.ts

@@ -0,0 +1,13 @@
+import { ElementRef } from '@angular/core';
+import { PasswordDirective } from './password.directive';
+
+describe('PasswordDirective', () => {
+  it('should create an instance', () => {
+    const mockElementRef = {
+      nativeElement: document.createElement('input'),
+    } as ElementRef<HTMLInputElement>;
+
+    const directive = new PasswordDirective(mockElementRef);
+    expect(directive).toBeTruthy();
+  });
+});