carriera-intern 0.0.0 → 1.1.76

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

@@ -1,282 +0,0 @@
-import {
-  Directive,
-  ElementRef,
-  HostListener,
-  input,
-  OnInit,
-} from '@angular/core';
-import { MaskHelper } from './helpers';
-
-@Directive({
-  selector: '[appPassword]',
-})
-export class PasswordDirective implements OnInit {
-  /**
-   * Input property to enable or disable the password masking behavior.
-   */
-  appPassword = input<boolean>(true);
-
-  /**
-   * Input property to hide or show the password
-   */
-  visible = input<boolean>(false);
-
-  /**
-   * Input property to specify the type of the password
-   */
-  account = input<boolean>(false);
-
-  /**
-   * Input property to specify how many characters from the end of the
-   * password should be revealed. Defaults to 0 (fully masked).
-   */
-  reveal = input<number>(0);
-
-  appMask = input<string>('');
-
-  max = input<number | undefined>(0);
-
-  /**
-   * Stores the actual, unmasked password value,
-   * while the input element displays a masked version.
-   */
-  private realValue: string = '';
-
-  constructor(private el: ElementRef<HTMLInputElement>) {}
-
-  /**
-   * Lifecycle hook called after Angular initializes the directive's data-bound properties.
-   * If password masking is enabled, it sets up the initial masking.
-   */
-  ngOnInit(): void {
-    if (this.appPassword() && this.reveal() > 0) {
-      this.setupPasswordMasking();
-    }
-  }
-
-  /**
-   * Sets up the initial state for password masking.
-   * It reads the initial value from the input (if any) as the `realValue`
-   * and then updates the input's display to show the masked version.
-   */
-  private setupPasswordMasking(): void {
-    const input = this.el.nativeElement;
-    this.realValue = input.value || ''; // Assume initial value is unmasked or is the real one
-    this.updateDisplayValue();
-  }
-
-  /**
-   * HostListener for the 'input' event on the host element.
-   * This is the core logic for synchronizing `realValue` with user input
-   * on the masked field. It infers changes to `realValue`
-   * based on `event.data`, cursor position, and the difference in length
-   * between the input's current display value and the previous `realValue`.
-   * @param event - The InputEvent object.
-   */
-  @HostListener('input', ['$event'])
-  onInput(event: InputEvent): void {
-    if (!this.appPassword() || !this.reveal()) return;
-    const input = this.el.nativeElement;
-    let cursorPosition = input.selectionStart || 0;
-    const displayValue = input.value;
-    const lengthDiff = displayValue.length - this.realValue.length;
-    let newRealValue = this.realValue;
-
-    if (event.data && lengthDiff <= 0) {
-      const deletedCount = Math.abs(lengthDiff) + event.data.length;
-      const replaceStart = cursorPosition - event.data.length;
-      newRealValue =
-        this.realValue.slice(0, Math.max(0, replaceStart)) +
-        event.data +
-        this.realValue.slice(Math.max(0, replaceStart) + deletedCount);
-    } else if (lengthDiff > 0) {
-      const addedChars =
-        event.data ||
-        displayValue.slice(cursorPosition - lengthDiff, cursorPosition);
-      const insertPosition = cursorPosition - addedChars.length;
-      newRealValue =
-        this.realValue.slice(0, Math.max(0, insertPosition)) +
-        addedChars +
-        this.realValue.slice(Math.max(0, insertPosition));
-    } else if (lengthDiff < 0) {
-      const deletedCount = Math.abs(lengthDiff);
-      newRealValue =
-        this.realValue.slice(0, cursorPosition) +
-        this.realValue.slice(cursorPosition + deletedCount);
-    }
-
-    // Only enforce numeric input if account() is true
-    if (this.account() && !/^\d*$/.test(newRealValue)) {
-      // Revert the input field to the previous masked value and restore cursor
-      this.updateDisplayValue();
-      this.setCursorPosition(cursorPosition - 1); // Move cursor back
-      return;
-    }
-
-    if (this.max()) {
-      if (newRealValue.length > this.max()!) {
-        this.updateDisplayValue();
-        this.setCursorPosition(cursorPosition - 1); // Move cursor back
-
-        return;
-      }
-    }
-
-    if (this.appMask() && this.appMask() !== '') {
-      const { formattedValue } = MaskHelper.applyMask(
-        MaskHelper.extractUserInput(newRealValue),
-        this.appMask()
-      );
-      cursorPosition =
-        cursorPosition + formattedValue.length - newRealValue.length;
-      newRealValue = formattedValue;
-    }
-
-    this.realValue = newRealValue;
-
-    this.updateDisplayValue();
-    this.setCursorPosition(cursorPosition);
-    this.dispatchRealValueChange();
-  }
-
-  /**
-   * HostListener for the 'cut' event.
-   * Prevents default cut behavior to operate on `realValue`.
-   * It copies the corresponding part of `realValue` to the clipboard
-   * and updates `realValue` and the display.
-   * @param event - The ClipboardEvent object.
-   */
-  @HostListener('cut', ['$event'])
-  onCut(event: ClipboardEvent): void {
-    if (!this.appPassword() || !this.reveal()) 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 action
-      const cutText = this.realValue.slice(start, end); // Cut from realValue
-      event.clipboardData?.setData('text/plain', cutText);
-
-      this.realValue =
-        this.realValue.slice(0, start) + this.realValue.slice(end);
-
-      this.updateDisplayValue();
-      this.setCursorPosition(start); // Set cursor to the start of the cut area
-      this.dispatchRealValueChange();
-    }
-  }
-
-  /**
-   * HostListener for the 'copy' event.
-   * Prevents default copy behavior to ensure the unmasked `realValue` segment is copied.
-   * @param event - The ClipboardEvent object.
-   */
-  @HostListener('copy', ['$event'])
-  onCopy(event: ClipboardEvent): void {
-    if (!this.appPassword() || !this.reveal()) 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 action
-      const copiedText = this.realValue.slice(start, end); // Copy from realValue
-      event.clipboardData?.setData('text/plain', copiedText);
-    }
-  }
-
-  /**
-   * Updates the input element's display value with a masked version of `realValue`.
-   * Uses '•' for masked characters. Respects the `reveal` input to show
-   * a specified number of characters from the end of the password.
-   * This method is responsible for creating the visual masking.
-   */
-  private updateDisplayValue(): void {
-    if (!this.appPassword() || !this.reveal()) return;
-    if (this.visible()) {
-      this.el.nativeElement.value = this.realValue;
-      return;
-    }
-
-    const revealCount = this.reveal();
-    const realLength = this.realValue.length;
-    let displayValue = '';
-
-    if (revealCount > 0 && realLength > revealCount) {
-      const actualRevealCount = Math.min(revealCount, realLength);
-      // Calculate how many characters to mask
-      const maskedCharsCount = realLength - actualRevealCount;
-
-      if (maskedCharsCount > 0) {
-        // Get the part of the real value that should be revealed
-        const revealedPart = this.realValue.slice(maskedCharsCount); // Corrected from slice(realLength - actualRevealCount)
-        displayValue = '•'.repeat(maskedCharsCount) + revealedPart;
-      } else {
-        // If all characters are to be revealed (revealCount >= realLength)
-        displayValue = this.realValue;
-      }
-    } else {
-      // Fully mask if revealCount is 0 or realValue is lesser than revealCount
-      displayValue = '•'.repeat(realLength);
-    }
-
-    this.el.nativeElement.value = displayValue;
-  }
-
-  /**
-   * Sets the cursor position within the input field.
-   * This is crucial after `updateDisplayValue` changes the entire input value,
-   * to maintain a natural cursor behavior for the user.
-   * Uses `setTimeout` to ensure the operation occurs after Angular's view update.
-   * @param position - The desired cursor position.
-   */
-  private setCursorPosition(position: number): void {
-    const input = this.el.nativeElement;
-    // setTimeout ensures this runs after the current browser rendering tick
-    setTimeout(() => {
-      // Clamp position to be within the bounds of the current display value's length
-      const currentLength = input.value.length;
-      const newPosition = Math.max(0, Math.min(position, currentLength));
-      input.setSelectionRange(newPosition, newPosition);
-    }, 0);
-  }
-
-  /**
-   * Dispatches a custom event named 'realValueChange' from the host element.
-   * The event's `detail` property contains the unmasked `realValue`.
-   * This allows parent components (like your `InputComponent`) to listen for
-   * changes to the actual password.
-   */
-  private dispatchRealValueChange(): void {
-    const customEvent = new CustomEvent('realValueChange', {
-      bubbles: true, // Allows event to bubble up the DOM
-      composed: true, // Allows event to cross Shadow DOM boundaries
-      detail: this.realValue,
-    });
-    this.el.nativeElement.dispatchEvent(customEvent);
-  }
-
-  /**
-   * Public method to get the current unmasked "real" password value.
-   * @returns The real password value as a string.
-   */
-  getRealValue(): string {
-    return this.realValue;
-  }
-
-  /**
-   * Public method to set the "real" password value from outside the directive
-   * (e.g., when the parent form control's value is changed programmatically).
-   * It updates the internal `realValue` and then refreshes the masked display.
-   * @param value - The new real password value to set.
-   */
-  setRealValue(value: string): void {
-    this.realValue = value || '';
-    this.updateDisplayValue();
-  }
-}