carriera-intern 0.0.0 → 1.1.76

package/projects/carriera-intern-components/src/app/components/input/input.component.ts

@@ -1,1486 +0,0 @@
-// Angular
-import {
-  AfterViewInit,
-  Component,
-  computed,
-  ElementRef,
-  HostListener,
-  input,
-  OnInit,
-  Optional,
-  output,
-  Self,
-  signal,
-  ViewChild,
-  ChangeDetectorRef,
-} from '@angular/core';
-import {
-  ControlValueAccessor,
-  NgControl,
-  AbstractControl,
-} from '@angular/forms';
-import { NgTemplateOutlet } from '@angular/common';
-
-// Pipes
-import { CurrencyPipe } from '../../pipes/currency.pipe';
-import {
-  InputClassPipe,
-  BrokerProgressPipe,
-  ClearTooltipPipe,
-  HighlightSearchPipe,
-  RemapPmIconsPipe,
-  ErrorMessagePipe,
-} from './pipes';
-
-// Directives
-import { PasswordDirective } from './directives/password.directive';
-import { NumberFormatDirective } from './directives/number-format.directive';
-import { MaskDirective } from './directives/mask.directive';
-
-import { InfiniteScrollDirective } from '../../directives/infinite-scroll.directive';
-import { IntersectionObserverDirective } from '../../directives/intersection-observer.directive';
-
-// Bootstrap
-import {
-  NgbDropdownModule,
-  NgbPopover,
-  NgbTooltip,
-} from '@ng-bootstrap/ng-bootstrap';
-
-// Models
-import {
-  CaiInputConfig,
-  DropdownOption,
-  DropdownArrays,
-  DropdownOptions,
-  DropdownKeys,
-  DropdownGroups,
-  GroupedNavigationState,
-  KeyboardNavigationState,
-} from './models';
-
-// Components
-import { AvatarComponent } from '../avatar/avatar.component';
-import { SvgIconComponent } from 'angular-svg-icon';
-
-// Helpers
-import {
-  InputHelper,
-  KeyboardNavigationHelper,
-  CastableType,
-  CastableTypeMap,
-} from './utilities';
-
-interface AutofillableFormControl extends AbstractControl {
-  _autofilled?: boolean;
-}
-
-@Component({
-  selector: 'cai-input',
-  templateUrl: './input.component.html',
-  styleUrl: './input.component.scss',
-  imports: [
-    // Pipes
-    ErrorMessagePipe,
-    CurrencyPipe,
-    HighlightSearchPipe,
-    RemapPmIconsPipe,
-    ClearTooltipPipe,
-    BrokerProgressPipe,
-    InputClassPipe,
-
-    // Directives
-    PasswordDirective,
-    NumberFormatDirective,
-    MaskDirective,
-    InfiniteScrollDirective,
-    IntersectionObserverDirective,
-
-    // Bootstrap
-    NgbDropdownModule,
-    NgbTooltip,
-    NgTemplateOutlet,
-
-    // Components
-    SvgIconComponent,
-    AvatarComponent,
-  ],
-})
-export class InputComponent
-  implements ControlValueAccessor, AfterViewInit, OnInit
-{
-  // Refs
-  @ViewChild('inputRef') inputRef!: ElementRef<HTMLInputElement>;
-  @ViewChild('containerRef') containerRef!: ElementRef<HTMLInputElement>;
-  @ViewChild('dropdown') dropdown!: NgbPopover;
-  @ViewChild('closeTooltip') closeTooltip!: NgbPopover;
-
-  // Directive refs
-  @ViewChild(PasswordDirective) PasswordDirective!: PasswordDirective;
-  @ViewChild(NumberFormatDirective)
-  NumberFormatDirective!: NumberFormatDirective;
-  @ViewChild(MaskDirective)
-  MaskDirective!: MaskDirective;
-
-  // Inputs
-
-  id = input<string>('');
-
-  config = input<CaiInputConfig>({});
-
-  options = input<DropdownArrays>([]);
-
-  preselectedOptions = input<DropdownArrays | null>(null);
-
-  isLoading = input<boolean>(false);
-
-  hideValidation = input<boolean>(false);
-  showNoResults = input<boolean>(true);
-
-  preselectedUnit = input<string | null>(null); // Subcontent drop
-
-  unassignedCount = input<number>(0);
-
-  // Signals
-
-  openGroup = signal<number | null>(null);
-
-  isDropdownOpen = signal<boolean>(false);
-
-  closing = signal<boolean>(false);
-
-  canTooltipBeVisible = signal<boolean>(false);
-  disabled = signal<boolean>(false);
-
-  value = signal<string>('');
-  searchValue = signal<string>('');
-
-  visible = signal<boolean>(false); // Password visibility
-
-  selectedOption = signal<DropdownOptions | null>(null);
-  multipleSelectedOptions = signal<DropdownOptions[]>([]);
-
-  focused = signal<boolean>(false);
-  hovered = signal<boolean>(false);
-
-  isAdding = signal<boolean>(false);
-  isAutofilled = signal<boolean>(false);
-
-  isFocusedWithMouseClick = signal<boolean>(false);
-
-  // Dispatch board signals
-  foldedBoards = signal<number[]>([]);
-
-  randomAutocomplete = signal<string>(this.randomizeAutocomplete());
-
-  // Grouped: Where 0 for optionIndex is always the group item head
-  keyboardNavigationState = signal<KeyboardNavigationState>({
-    singleIndex: null,
-    groupedNavigationState: null,
-  });
-
-  // Computed signals
-
-  public isDisabled = computed<boolean>(() => {
-    return this.disabled() || !!this.config().disabled;
-  });
-
-  public dropdownOptions = computed<DropdownOptions[]>(() => {
-    const options = InputHelper.getSearchedDropdownOptions(
-      this.options(),
-      this.searchValue() || '',
-      this.config().dropdown,
-      this.config().search && !this.config().useOutsideSearch,
-      this.foldedBoards(),
-      this.config().optionLabel,
-      this.openGroup(),
-      this.isDropdownOpen(),
-    );
-    return options;
-  });
-
-  // Should apply contentful styles
-  public hasText = computed<boolean>(() => {
-    return Boolean(
-      this.value() ||
-      (this.selectedOption() && this.config().dropdown !== 'subcontent') ||
-      this.isAutofilled() ||
-      !!this.multipleSelectedOptions().length,
-    );
-  });
-
-  public containerWidth = signal<number>(0);
-
-  step = computed(() => {
-    const numericValue = parseFloat(this.value() || '0');
-    const value = numericValue || 0;
-    if (this.config().step === 'automatic') {
-      if (value < 20000) return 1000;
-      else if (value < 50000) return 5000;
-      else if (value < 100000) return 10000;
-      else return 20000;
-    } else if (this.config().step) return this.config().step as number;
-    else {
-      return 1;
-    }
-  });
-
-  public isGroupedDropdown = computed<boolean>(() => {
-    return (
-      this.config().dropdown === 'dispatch' ||
-      this.config().dropdown === 'ftl-dispatch' ||
-      this.config().dropdown === 'fuel-stop-transaction' ||
-      // For toll we skip the header items since they are not selectable
-      this.config().dropdown === 'toll' ||
-      // Won't handle for now since we're delaying split functionality
-      this.config().dropdown === 'split-driver' ||
-      this.config().dropdown === 'split-truck' ||
-      this.config().dropdown === 'split-trailer'
-    );
-  });
-
-  // Outputs
-  onBlur = output();
-  onFocused = output();
-  onReset = output();
-
-  onValueChange = output<string | number | null>();
-
-  onOptionAdded = output<string>(); // When an option is added
-  onAdd = output(); // When add is clicked
-
-  onSelectionChange = output<DropdownKeys | null>();
-  onSelectedObject = output<DropdownOptions | null>();
-  onSelectedGroup = output<DropdownGroups | null>();
-
-  onClear = output();
-  onAutofill = output();
-  onScrolledToBottom = output();
-  onScrolledToBottomGroup = output();
-  onSearch = output<string>();
-  onValueAdded = output<string | number | null>();
-  onRemove = output();
-  onHoverRemove = output<boolean>();
-
-  dropdownPopperOptions = (options: Partial<Record<string, unknown>> = {}) => {
-    // const modifiers = (options['modifiers'] as { name?: string; options?: Record<string, unknown> }[] | undefined) ?? [];
-    // // Filter out the specific flip modifier with options
-    // const flipModifier = modifiers.find((m) => m?.name === 'flip' && m?.options === undefined)
-    // const otherModifiers = modifiers.filter((m) => m !== flipModifier);
-
-    // const newOptions ={
-    //   ...options,
-    //   modifiers: [
-    //     ...otherModifiers,
-    //     {
-    //       ...flipModifier,
-    //       name: 'flip',
-    //       options: {
-    //         altBoundary: true,
-    //         rootBoundary: 'document',
-    //         padding: 8,
-    //       },
-    //     },
-    //   ],
-    // };
-    return options;
-  };
-
-  constructor(
-    @Optional() @Self() public ngControl: NgControl | null,
-    private cdr: ChangeDetectorRef,
-  ) {
-    if (this.ngControl) {
-      this.ngControl.valueAccessor = this;
-    }
-  }
-
-  onAutofilled(): void {
-    if (!this.config().autocomplete) {
-      return;
-    }
-
-    this.onAutofill.emit();
-
-    const ctrl = this.ngControl?.control as AutofillableFormControl;
-    if (!ctrl) return;
-
-    ctrl._autofilled = true;
-    this.isAutofilled.set(true);
-    ctrl.setErrors(null);
-    ctrl.markAsDirty();
-    ctrl.markAsTouched();
-    ctrl.updateValueAndValidity({ emitEvent: false });
-    this.cdr.detectChanges();
-  }
-
-  clearAutofillFlag(): void {
-    const ctrl = this.ngControl?.control as AutofillableFormControl;
-    if (ctrl?._autofilled) {
-      ctrl._autofilled = false;
-      this.isAutofilled.set(false);
-      ctrl.updateValueAndValidity({ emitEvent: false });
-    }
-  }
-
-  ngOnInit(): void {
-    const optionLabel = this.config().optionLabel || 'label';
-
-    if (
-      this.preselectedUnit() &&
-      this.options() &&
-      this.config().dropdown === 'subcontent'
-    ) {
-      const option = (this.options() as DropdownOption[])!.find((option) => {
-        return (
-          option[optionLabel]?.toString().toLowerCase() ===
-          this.preselectedUnit()?.toString().toLowerCase()
-        );
-      });
-      if (option) {
-        this.selectedOption.set(option);
-      }
-    }
-  }
-
-  ngAfterViewInit(): void {
-    setTimeout(() => {
-      this.updateContainerWidth();
-      if (this.config().autofocus) {
-        this.focus();
-      }
-
-      // Set up autofill detection via animation events
-      if (
-        this.config().autocomplete &&
-        this.config().autocomplete !== 'off' &&
-        this.inputRef?.nativeElement
-      ) {
-        this.setupAutofillDetection();
-      }
-    }, 0);
-  }
-
-  private setupAutofillDetection(): void {
-    if (!this.inputRef?.nativeElement) return;
-
-    const inputElement = this.inputRef.nativeElement;
-
-    // Check for autofill using CSS pseudo-class detection
-    const checkForAutofill = () => {
-      if (this.isAutofilled()) return;
-
-      // Check if the element matches the -webkit-autofill pseudo-class
-      const isAutofilled =
-        inputElement.matches(':-webkit-autofill') ||
-        inputElement.matches(':-webkit-autofill:hover') ||
-        inputElement.matches(':-webkit-autofill:focus') ||
-        inputElement.matches(':-webkit-autofill:active');
-
-      if (isAutofilled) {
-        this.onAutofilled();
-      }
-    };
-
-    // Periodic checks for autofill
-    setTimeout(checkForAutofill, 200);
-    setTimeout(checkForAutofill, 500);
-    setTimeout(checkForAutofill, 1000);
-  }
-
-  private updateContainerWidth(): void {
-    if (this.containerRef?.nativeElement) {
-      this.containerWidth.set(this.containerRef.nativeElement.offsetWidth);
-    }
-  }
-
-  onInput(event: Event): void {
-    // Clear autofill flag when user manually types
-    this.clearAutofillFlag();
-
-    const inputElement = event.target as HTMLInputElement;
-    const inputEvent = event as InputEvent;
-    const inputData = inputEvent.data;
-    const max = this.config().max;
-
-    // Handle inputs normally for all inputs other than password and number
-    if (
-      ((this.config().type === 'password' ||
-        this.config().type === 'account') &&
-        this.config().reveal) ||
-      this.config().type === 'number'
-    ) {
-      return;
-    }
-
-    if (
-      inputData &&
-      (this.config().disabledCharacters?.length ||
-        this.config().enabledCharacters?.length ||
-        this.config().spacesAllowed !== undefined)
-    ) {
-      // Capture cursor position before any modifications
-      const cursorPosition = inputElement.selectionStart || 0;
-      const beforeCursor = inputElement.value.substring(
-        0,
-        cursorPosition - inputData.length,
-      );
-      const afterCursor = inputElement.value.substring(cursorPosition);
-
-      let filteredData = inputData;
-
-      if (this.config().disabledCharacters?.length) {
-        filteredData = Array.from(filteredData)
-          .filter(
-            (char) =>
-              !this.config().disabledCharacters?.includes(char?.toLowerCase()),
-          )
-          .join('');
-      }
-
-      if (this.config().enabledCharacters?.length) {
-        filteredData = Array.from(filteredData)
-          .filter((char) =>
-            this.config().enabledCharacters?.includes(char?.toLowerCase()),
-          )
-          .join('');
-      }
-
-      if (this.config().spacesAllowed !== undefined) {
-        // First, handle space validation (leading spaces and double spaces)
-        let processedData = '';
-        for (let i = 0; i < filteredData.length; i++) {
-          const char = filteredData[i];
-          const fullValueSoFar = beforeCursor + processedData;
-
-          if (char === ' ') {
-            if (fullValueSoFar.length === 0) {
-              continue;
-            }
-
-            if (fullValueSoFar.endsWith(' ')) {
-              continue;
-            }
-          }
-
-          processedData += char;
-        }
-
-        const fullValue = beforeCursor + processedData + afterCursor;
-        const currentSpaceCount = (fullValue.match(/ /g) || []).length;
-
-        // Then apply space count limit
-        if (currentSpaceCount > this.config().spacesAllowed!) {
-          const spacesInProcessedData = (processedData.match(/ /g) || [])
-            .length;
-          const currentSpacesWithoutProcessed =
-            currentSpaceCount - spacesInProcessedData;
-          const allowedSpacesInProcessed = Math.max(
-            0,
-            this.config().spacesAllowed! - currentSpacesWithoutProcessed,
-          );
-
-          if (allowedSpacesInProcessed === 0) {
-            processedData = processedData.replace(/ /g, '');
-          } else if (spacesInProcessedData > allowedSpacesInProcessed) {
-            const spacesToRemove =
-              spacesInProcessedData - allowedSpacesInProcessed;
-            let removedCount = 0;
-            processedData = Array.from(processedData)
-              .filter((char) => {
-                if (char === ' ' && removedCount < spacesToRemove) {
-                  removedCount++;
-                  return false;
-                }
-                return true;
-              })
-              .join('');
-          }
-        }
-
-        filteredData = processedData;
-      }
-
-      if (filteredData !== inputData) {
-        inputElement.value = beforeCursor + filteredData + afterCursor;
-        const newCursorPosition = beforeCursor.length + filteredData.length;
-        inputElement.setSelectionRange(newCursorPosition, newCursorPosition);
-      }
-    }
-
-    if (max && inputElement.value.length > max) {
-      const cursorPosition = inputElement.selectionStart || 0;
-      inputElement.value = inputElement.value.slice(0, max);
-      // Restore cursor position, capping at max length
-      const newCursorPosition = Math.min(cursorPosition, max);
-      inputElement.setSelectionRange(newCursorPosition, newCursorPosition);
-    }
-
-    if (this.config().textTransform) {
-      const cursorPosition = inputElement.selectionStart || 0;
-      let newCursorPosition = cursorPosition;
-
-      switch (this.config().textTransform) {
-        case 'capitalize':
-          let words = inputElement.value.split(' ');
-          inputElement.value = words
-            .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-            .join(' ');
-          break;
-        case 'uppercase':
-          inputElement.value = inputElement.value
-            .split('')
-            .map((letter) => {
-              if (this.config().textTransformExceptions?.includes(letter)) {
-                return letter.toLowerCase();
-              }
-              return letter.toUpperCase();
-            })
-            .join('');
-          break;
-        case 'lowercase':
-          inputElement.value = inputElement.value.toLowerCase();
-          break;
-      }
-
-      // Restore cursor position after text transformation (deferred to allow bulk operations)
-      inputElement.setSelectionRange(newCursorPosition, newCursorPosition);
-    }
-
-    this.value.set(inputElement.value);
-    this.searchValue.set(inputElement.value);
-
-    if (
-      this.config().search &&
-      !this.config().dropdownAutocomplete &&
-      !this.isAdding()
-    ) {
-      this.onSearch.emit(inputElement.value);
-      this.onTouched();
-
-      if (
-        this.keyboardNavigationState().singleIndex !== null ||
-        this.keyboardNavigationState().groupedNavigationState !== null
-      ) {
-        this.startKeyboardNavigation();
-      }
-
-      if (!this.dropdown.isOpen()) {
-        this.openDropdown();
-      }
-
-      if (this.selectedOption()) {
-        this.selectedOption.set(null);
-        this.dispatchOnChange(null);
-
-        this.onSelectionChange.emit(null);
-        this.onSelectedObject.emit(null);
-      }
-      return;
-    }
-
-    if (this.config().dropdownAutocomplete) {
-      if (!this.dropdown.isOpen()) {
-        this.openDropdown();
-      }
-      this.startKeyboardNavigation();
-    }
-
-    this.dispatchOnChange(this.value());
-  }
-
-  // Event from password, number format, and mask directives
-  @HostListener('realValueChange', ['$event'])
-  onRealValueChange(event: CustomEvent): void {
-    this.value.set(event.detail);
-    this.searchValue.set(event.detail);
-
-    if (this.config().type === 'number') {
-      this.dispatchOnChange(Number(event.detail));
-      return;
-    }
-
-    this.dispatchOnChange(event.detail);
-  }
-
-  // ControlValueAccessor methods
-  onChange = (_: any) => {};
-  onTouched = () => {};
-
-  dispatchOnChange(value: any): void {
-    if (value === undefined || value === null || value === '') {
-      this.onChange(null);
-      this.onValueChange.emit(null);
-    } else {
-      this.onChange(value);
-      this.onValueChange.emit(value);
-    }
-
-    requestAnimationFrame(() => {
-      if (this.config().passwordRequirements) {
-        if (this.ngControl?.control?.valid) {
-          this.closeDropdown();
-        } else {
-          this.openDropdown();
-        }
-      }
-    });
-  }
-
-  registerOnChange(fn: any): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: any): void {
-    this.onTouched = fn;
-  }
-
-  setDisabledState(isDisabled: boolean): void {
-    this.disabled.set(isDisabled);
-  }
-
-  /**
-   * Writes a new value to the element. (ControlValueAccessor)
-   */
-  writeValue(value: any): void {
-    if (value && this.config().textTransform && typeof value === 'string') {
-      switch (this.config().textTransform) {
-        case 'capitalize':
-          let words = value.split(' ');
-          value = words
-            .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-            .join(' ');
-          break;
-        case 'uppercase':
-          value = value
-            .split('')
-            .map((letter) => {
-              if (this.config().textTransformExceptions?.includes(letter)) {
-                return letter.toLowerCase();
-              }
-              return letter.toUpperCase();
-            })
-            .join('');
-          break;
-        case 'lowercase':
-          value = value.toLowerCase();
-          break;
-      }
-    }
-    this.value.set(value);
-    this.searchValue.set(value);
-
-    const optionValue = this.config().optionValue;
-
-    requestAnimationFrame(() => {
-      if (value || value === 0) {
-        this.onTouched();
-      } else {
-        this.selectedOption.set(null);
-        this.setValue();
-        return;
-      }
-
-      if (
-        !(this.config().dropdown && !this.config().dropdownAutocomplete) ||
-        this.config().dropdown === 'subcontent'
-      ) {
-        this.setValue();
-      }
-
-      if (this.config().dropdownAutocomplete) {
-        return;
-      }
-
-      if (!this.options() && !this.preselectedOptions()) {
-        return;
-      }
-
-      if (!this.options()?.length && !this.preselectedOptions()?.length) {
-        return;
-      }
-
-      const options = !!this.preselectedOptions()?.length
-        ? [...this.options(), ...this.preselectedOptions()!]
-        : this.options();
-
-      const { newValue, selectedOption, multipleSelectedOptions } =
-        InputHelper.getOptionValue(
-          value,
-          options,
-          optionValue as keyof DropdownOptions,
-          this.config(),
-        );
-
-      if (this.config().dropdown !== 'subcontent') {
-        this.value.set(newValue || '');
-        this.searchValue.set(newValue || '');
-        this.selectedOption.set(selectedOption || null);
-        this.multipleSelectedOptions.set(multipleSelectedOptions || []);
-      }
-    });
-  }
-
-  /**
-   * Increments the value of a number input by the current step.
-   */
-  increment(event?: MouseEvent): void {
-    const max = this.config().max;
-    if (max && Number(this.value()) + this.step() > max) {
-      this.value.set(String(max));
-    } else {
-      this.value.update((v) =>
-        String(
-          (parseFloat(v) ? parseFloat(v) : this.config().min || 0) +
-            this.step(),
-        ),
-      );
-    }
-    this.dispatchOnChange(this.value());
-    this.setValue();
-    this.focus(event);
-  }
-
-  /**
-   * Decrements the value of a number input by the current step.
-   */
-  decrement(event?: MouseEvent): void {
-    const min = this.config().min;
-    if (min && Number(this.value()) - this.step() < min) {
-      this.value.set(String(min));
-    } else {
-      this.value.update((v) => {
-        const currentValue = parseFloat(v) ? parseFloat(v) : 0;
-        const nextValue = currentValue - this.step();
-        return String(nextValue <= 0 ? 0 : nextValue);
-      });
-    }
-    this.dispatchOnChange(this.value());
-    this.setValue();
-    this.focus(event);
-  }
-
-  /**
-   * Toggles the visibility of the password input.
-   * @param event - The MouseEvent that triggered the toggle.
-   */
-  toggleVisibility(event?: MouseEvent): void {
-    if (this.config().type !== 'password' && this.config().type !== 'account') {
-      return;
-    }
-
-    if (this.focused() || !this.hasText()) {
-      this.focus(event);
-    }
-    this.visible.update((v) => !v);
-    setTimeout(() => this.setValue(), 0);
-  }
-
-  /**
-   * Sets the value in the actual HTML input element or updates the
-   * "real" value in the associated directive.
-   */
-  setValue(): void {
-    if (!this.inputRef || !this.inputRef.nativeElement) {
-      return;
-    }
-
-    let type =
-      !!this.config().mask && !this.config().reveal
-        ? 'masked'
-        : this.config().type;
-
-    if ((type === 'password' || type === 'account') && !this.config().reveal) {
-      type = 'text';
-    }
-
-    switch (type) {
-      case 'password':
-        if (this.PasswordDirective) {
-          this.PasswordDirective.setRealValue(this.value());
-        } else {
-          this.inputRef.nativeElement.value = this.value();
-        }
-        break;
-      case 'account':
-        if (this.PasswordDirective) {
-          this.PasswordDirective.setRealValue(this.value());
-        } else {
-          this.inputRef.nativeElement.value = this.value();
-        }
-        break;
-      case 'number':
-        if (this.NumberFormatDirective) {
-          this.NumberFormatDirective.setRealValue(this.value());
-        } else {
-          this.inputRef.nativeElement.value = this.value();
-        }
-        break;
-      case 'masked':
-        if (this.MaskDirective) {
-          this.MaskDirective.setRealValue(this.value());
-        } else {
-          this.inputRef.nativeElement.value = this.value();
-        }
-        break;
-      default:
-        this.inputRef.nativeElement.value = this.value();
-        break;
-    }
-  }
-
-  /**
-   * Focuses the input element.
-   * Prevents the default action of the mouse event to avoid unintended behaviors
-   * like double focus or focus loss.
-   * @param event - The MouseEvent that initiated the focus action.
-   */
-  focus(event?: MouseEvent): void {
-    this.isFocusedWithMouseClick.set(true);
-    if (event?.target === this.inputRef?.nativeElement) {
-      return;
-    }
-    if (event) {
-      event.stopPropagation();
-      event.preventDefault();
-    }
-    if (this.inputRef && this.inputRef.nativeElement) {
-      this.inputRef.nativeElement.focus();
-    }
-  }
-
-  /**
-   * Called when the input element receives focus (focus event).
-   */
-  onFocus(event: FocusEvent): void {
-    this.onFocused.emit();
-    this.updateContainerWidth();
-    this.focused.set(true);
-    this.keyboardNavigationState.set({
-      singleIndex: null,
-      groupedNavigationState: null,
-    });
-
-    if (this.config().dropdown && !this.isAdding()) {
-      // Mouse clicked focus should always open the dropdown, but keyboard focus should only open the dropdown if there is no selected option
-      if (!this.isFocusedWithMouseClick()) {
-        if (!this.selectedOption()) {
-          this.startKeyboardNavigation();
-          if (!this.config().dropdownAutocomplete) {
-            this.openDropdown();
-          }
-        }
-      } else {
-        this.openDropdown();
-      }
-    }
-
-    if (this.config().passwordRequirements) {
-      if (this.ngControl?.control?.invalid) {
-        this.openDropdown();
-      }
-    }
-
-    this.isFocusedWithMouseClick.set(false);
-
-    if (!this.config().add && !this.config().search) return;
-
-    if (this.isAdding()) return;
-
-    if (this.config().search && !this.config().dropdownAutocomplete) {
-      this.value.set('');
-      this.searchValue.set('');
-      this.inputRef.nativeElement.value = this.value();
-    }
-  }
-
-  /**
-   * Called when the input element loses focus (blur event).
-   */
-  dispatchOnBlur(): void {
-    this.onBlur.emit();
-    this.onTouched();
-    this.closeDropdown();
-    this.focused.set(false);
-    this.isFocusedWithMouseClick.set(false);
-
-    if (
-      !this.config().add &&
-      !(this.config().dropdown === 'dispatch') &&
-      !this.config().search
-    )
-      return;
-
-    if (this.isAdding()) {
-      this.isAdding.set(false);
-      this.reset();
-
-      return;
-    }
-
-    requestAnimationFrame(() => {
-      if (!this.config().dropdownAutocomplete) {
-        this.inputRef.nativeElement.value = '';
-        this.value.set('');
-      }
-    });
-  }
-
-  toggleHovered(value: boolean): void {
-    this.hovered.set(value);
-  }
-
-  /**
-   * Resets the input field's value to an empty string.
-   */
-  reset(event?: MouseEvent): void {
-    if (this.config().hasRemoveModal) {
-      this.closeTooltip.close();
-      this.onRemove.emit();
-
-      return;
-    }
-
-    if (this.config().hasResetButton) {
-      this.closeTooltip.close();
-      this.onReset.emit();
-      return;
-    }
-
-    if (this.isAdding()) this.isAdding.set(false);
-
-    if (this.config().dropdown === 'multiple') {
-      this.multipleSelectedOptions.set([]);
-    }
-    this.value.set('');
-    this.searchValue.set('');
-    this.dispatchOnChange(''); // Notify form control of the change
-    this.setValue(); // Update the actual input element
-
-    this.onClear.emit();
-    this.onSearch.emit('');
-    this.onValueChange.emit('');
-    this.selectedOption.set(null);
-    this.onSelectionChange.emit(null);
-    this.onSelectedObject.emit(null);
-
-    this.closeTooltip.close();
-
-    requestAnimationFrame(() => {
-      this.updateContainerWidth();
-    });
-
-    if (event) {
-      this.focus(event);
-    }
-  }
-
-  onClearHover(value: boolean): void {
-    this.onHoverRemove.emit(value);
-    this.canTooltipBeVisible.set(value);
-  }
-
-  closeDropdown(addNew?: boolean): void {
-    this.updateContainerWidth();
-
-    if (!addNew) {
-      this.closing.set(true);
-
-      setTimeout(() => {
-        this.dropdown.close();
-        this.isDropdownOpen.set(false);
-        this.closing.set(false);
-      }, 200);
-    } else {
-      this.dropdown.close();
-      this.isDropdownOpen.set(false);
-      this.closing.set(false);
-    }
-  }
-
-  openDropdown(): void {
-    this.dropdown.open();
-    this.isDropdownOpen.set(true);
-  }
-
-  randomizeAutocomplete(): string {
-    return `${Math.random().toString(36).substring(2, 15)}`;
-  }
-
-  /**
-   * Type guard that checks if a given property exists on an object.
-   * @param obj The object to check.
-   * @param prop The property to check for.
-   * @returns `true` if `prop` exists on `obj`, `false` otherwise.
-   */
-  hasProperty<T extends object>(obj: T, prop: PropertyKey): prop is keyof T {
-    return prop in obj;
-  }
-
-  /**
-   * Stops event propagation to prevent parent popover from closing
-   * @param event - The event to stop
-   */
-  stopEventPropagation(event: Event): void {
-    event.stopPropagation();
-    event.stopImmediatePropagation();
-  }
-
-  handleMultipleSelection(
-    option: DropdownOptions,
-    optionValue: keyof DropdownOptions,
-  ) {
-    if (
-      this.multipleSelectedOptions().some(
-        (selectedOption) => selectedOption.id === option.id,
-      )
-    ) {
-      this.multipleSelectedOptions.update((options) =>
-        options.filter((selectedOption) => selectedOption.id !== option.id),
-      );
-    } else {
-      this.multipleSelectedOptions.update((options) => [...options, option]);
-    }
-
-    this.dispatchOnChange([
-      ...this.multipleSelectedOptions().map((option) => option[optionValue]),
-    ]);
-  }
-
-  /**
-   * Handles when an option is selected from the dropdown.
-   * @param option - The selected option.
-   * @param event - The MouseEvent that initiated the selection action.
-   */
-  handleOption(option: DropdownOptions, event?: MouseEvent) {
-    if (event) {
-      this.stopEventPropagation(event);
-    }
-
-    const optionValue = this.config().optionValue ?? 'id';
-
-    if (optionValue && this.hasProperty(option, optionValue)) {
-      if (
-        this.config().dropdown !== 'subcontent' &&
-        this.config().dropdown !== 'multiple'
-      ) {
-        this.dispatchOnChange(option[optionValue]);
-      }
-
-      if (this.config().dropdown === 'multiple') {
-        this.handleMultipleSelection(option, optionValue);
-      }
-
-      event?.stopPropagation();
-      this.onSelectionChange.emit(option[optionValue]);
-      this.onSelectedObject.emit(option);
-    }
-
-    // Multiple selection dropdown stores the selected options in the selectedOption signal and autocomplete has the value in the value signal
-    if (
-      this.config().dropdown !== 'multiple' &&
-      !this.config().dropdownAutocomplete
-    ) {
-      this.selectedOption.set(option);
-    }
-
-    // Subcontent drop just adds the subcontent as a subcontent
-    if (this.config().dropdown === 'subcontent') {
-      this.closeDropdown();
-      this.focus(event);
-      this.setValue();
-
-      return;
-    }
-
-    // Clear the value for searching and adding etc...
-    if (
-      typeof this.config().dropdown === 'string' ||
-      (this.config().search && !this.config().dropdownAutocomplete) ||
-      this.config().add
-    ) {
-      this.value.set('');
-    } else {
-      this.value.set(
-        (option as DropdownOption)[this.config().optionLabel || 'label'],
-      );
-    }
-
-    this.setValue();
-    this.closeDropdown();
-  }
-
-  // For multiple selection dropdown
-  isSelectedOption(option: DropdownOptions) {
-    if (this.config().dropdown === 'multiple') {
-      return this.multipleSelectedOptions().some(
-        (selectedOption) => selectedOption.id === option.id,
-      );
-    }
-    return this.selectedOption()?.id === option.id;
-  }
-
-  /**
-   * Adds a new option to the dropdown.
-   * @param option - The option to add.
-   */
-  addOption() {
-    const option = this.inputRef.nativeElement.value;
-
-    if (!option) {
-      this.isAdding.set(false);
-      this.reset();
-    }
-
-    if (this.config().isEdit) {
-      this.onOptionAdded.emit(option);
-      return;
-    }
-
-    if (this.config().writeAddValue) {
-      this.value.set(option);
-      this.setValue();
-      this.dispatchOnChange(option);
-      this.onValueAdded.emit(option);
-      this.isAdding.set(false);
-
-      this.selectedOption.set({
-        id: -1,
-        [this.config().optionLabel || 'label']: option,
-      });
-
-      requestAnimationFrame(() => {
-        this.inputRef.nativeElement.blur();
-      });
-      return;
-    }
-
-    this.isAdding.set(false);
-
-    this.value.set('');
-    this.setValue();
-    this.onOptionAdded.emit(option);
-  }
-
-  /**
-   * Handles when the user clicks on the "ADD NEW" button in the dropdown.
-   * It sets the `isAdding` signal to `true`, closes the dropdown, and focuses the input.
-   * @param event - The MouseEvent that initiated the action.
-   */
-  handleAddingOption(event?: MouseEvent) {
-    this.onAdd.emit();
-    this.selectedOption.set(null);
-
-    if (!this.config().add) return;
-
-    // Open modal variant
-    if (
-      this.config().canOpenModal ||
-      (typeof this.config().dropdown === 'string' &&
-        this.config().dropdown !== 'pm' &&
-        this.config().dropdown !== 'bank')
-    ) {
-      this.closeDropdown(true);
-      return;
-    }
-
-    // Adding in input variant
-    this.isAdding.set(true);
-    this.closeDropdown();
-    if (event) this.focus(event);
-  }
-
-  // Dispatch modal
-
-  fold(boardId: number, event?: MouseEvent, group?: DropdownGroups) {
-    if (event) {
-      this.focus(event);
-    }
-
-    if (group) {
-      this.onSelectedGroup.emit(group);
-    }
-
-    // Handle Fuel Stop Transaction - Opening one franchise will close the other
-    if (this.config().dropdown === 'fuel-stop-transaction') {
-      if (!group?.isFranchise) {
-        this.handleOption(group as DropdownOptions);
-        requestAnimationFrame(() => {
-          this.inputRef.nativeElement.blur();
-        });
-        return;
-      }
-
-      if (!group?.count) {
-        return;
-      }
-
-      if (this.openGroup() === boardId) {
-        this.openGroup.set(null);
-        return;
-      }
-
-      this.openGroup.set(boardId);
-
-      return;
-    }
-
-    // Can have many open boards at a time
-    if (this.foldedBoards().includes(boardId)) {
-      this.foldedBoards.update((boards) =>
-        boards.filter((id) => id !== boardId),
-      );
-      return;
-    }
-
-    this.foldedBoards.update((boards) => [...boards, boardId]);
-  }
-
-  // #region Casting methods for template
-
-  /**
-   * Type-safe casting method for templates.
-   * Usage in template: cast(value, 'dispatch') or cast(value, 'broker'), etc.
-   * @param value - The value to cast
-   * @param type - The type string (e.g., 'dispatch', 'broker', 'contact')
-   * @returns The casted value or null
-   */
-  cast<T extends CastableType>(
-    value: unknown,
-    type: T,
-  ): CastableTypeMap[T] | null {
-    return InputHelper.cast(value, type);
-  }
-
-  // #endregion Casting methods for template
-
-  /**
-   * Handles infinite scroll event when dropdown is scrolled to bottom
-   * Emits an event that parent components can listen to for loading more data
-   */
-  onDropdownScrolledToBottom(isGroup?: boolean): void {
-    isGroup
-      ? this.onScrolledToBottomGroup.emit()
-      : this.onScrolledToBottom.emit();
-  }
-
-  onDropdownBackgroundClick(event: MouseEvent): void {
-    if (
-      event.target instanceof HTMLElement &&
-      !event.target.classList.contains('dropdown-menu')
-    ) {
-      return;
-    }
-
-    this.focus(event);
-    event.stopPropagation();
-  }
-
-  onDropdownIconClick(event: MouseEvent): void {
-    if (!this.focused() || !this.dropdown.isOpen()) {
-      this.focus(event);
-      this.openDropdown();
-      return;
-    }
-    this.inputRef.nativeElement.blur();
-    event.stopPropagation();
-  }
-
-  // #region Keyboard Navigation
-
-  acceptSelection(event: KeyboardEvent): void {
-    event.preventDefault();
-    event.stopPropagation();
-
-    const { singleIndex, groupedNavigationState } =
-      this.keyboardNavigationState();
-
-    if (!this.dropdown.isOpen()) {
-      return;
-    }
-
-    // Click on ADD
-    if (
-      this.config().add &&
-      (singleIndex === -1 || groupedNavigationState?.groupIndex === -1)
-    ) {
-      this.handleAddingOption();
-
-      if (!this.config().writeAddValue) {
-        requestAnimationFrame(() => {
-          this.inputRef?.nativeElement.blur();
-        });
-      }
-
-      return;
-    }
-
-    if (this.isGroupedDropdown()) {
-      if (groupedNavigationState?.optionIndex === 0) {
-        const group =
-          this.dropdownOptions()[groupedNavigationState?.groupIndex || 0];
-
-        if (group) {
-          this.fold(group?.id || 0, undefined, group as DropdownGroups);
-        }
-        return;
-      }
-    }
-
-    const option = KeyboardNavigationHelper.getOptionFromFocusedIndex(
-      this.keyboardNavigationState(),
-      this.dropdownOptions(),
-      this.config().dropdown as string,
-      this.isGroupedDropdown(),
-    );
-
-    if (option) {
-      this.handleOption(option);
-
-      requestAnimationFrame(() => {
-        this.inputRef?.nativeElement.blur();
-
-        KeyboardNavigationHelper.focusNextInput(this.inputRef);
-      });
-    }
-  }
-
-  handleArrowKeys(event: KeyboardEvent): void {
-    if (event) {
-      event.preventDefault();
-      event.stopPropagation();
-    }
-
-    if (!this.dropdown.isOpen()) {
-      this.openDropdown();
-    }
-
-    const arrowKeyNavigationState =
-      KeyboardNavigationHelper.getArrowKeyNavigationState(
-        this.keyboardNavigationState(),
-        this.isGroupedDropdown(),
-        this.config().add || false,
-        this.config().dropdown as string,
-        this.dropdownOptions(),
-        event.key,
-      );
-
-    this.setKeyboardNavigationState(
-      arrowKeyNavigationState.singleIndex,
-      arrowKeyNavigationState.groupedNavigationState,
-    );
-
-    KeyboardNavigationHelper.scrollToOption();
-  }
-
-  handleFirstAndLastSelection(event: KeyboardEvent): void {
-    if (event) {
-      event.preventDefault();
-      event.stopPropagation();
-    }
-
-    const firstLastNavigationState =
-      KeyboardNavigationHelper.getFirstLastNavigationState(
-        this.keyboardNavigationState(),
-        this.isGroupedDropdown(),
-        this.config().add || false,
-        this.config().dropdown as string,
-        this.dropdownOptions(),
-        event.key,
-      );
-
-    this.setKeyboardNavigationState(
-      firstLastNavigationState.singleIndex,
-      firstLastNavigationState.groupedNavigationState,
-    );
-
-    KeyboardNavigationHelper.scrollToOption();
-  }
-
-  startKeyboardNavigation(): void {
-    const { singleIndex, groupedNavigationState } =
-      KeyboardNavigationHelper.getInitialKeyboardNavigationState(
-        this.config().dropdown as string,
-        this.isGroupedDropdown(),
-        this.dropdownOptions(),
-      );
-
-    this.setKeyboardNavigationState(singleIndex, groupedNavigationState);
-  }
-
-  setKeyboardNavigationState(
-    singleIndex: number | null,
-    groupedNavigationState: GroupedNavigationState | null,
-  ): void {
-    this.keyboardNavigationState.set({ singleIndex, groupedNavigationState });
-  }
-
-  handleDropdownKeyboardNavigation(event: KeyboardEvent): void {
-    // TODO: Handle multiple selection input
-
-    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
-      this.handleArrowKeys(event);
-    }
-
-    if (event.key === 'Home' || event.key === 'End') {
-      this.handleFirstAndLastSelection(event);
-    }
-
-    if (event.key === 'Enter') {
-      this.acceptSelection(event);
-    }
-
-    if (
-      (event.key === 'Delete' || event.key === 'Backspace') &&
-      !this.value() &&
-      !this.isAdding() &&
-      this.selectedOption()
-    ) {
-      this.reset();
-    }
-  }
-
-  handleNumberKeyboardNavigation(event: KeyboardEvent): void {
-    if (event.key === 'ArrowUp') {
-      event.preventDefault();
-      event.stopPropagation();
-      this.increment();
-    }
-
-    if (event.key === 'ArrowDown') {
-      event.preventDefault();
-      event.stopPropagation();
-      this.decrement();
-    }
-  }
-
-  handlePasswordKeyboardNavigation(event: KeyboardEvent): void {
-    if ((event.altKey || event.metaKey) && event.key === 's') {
-      event.preventDefault();
-      event.stopPropagation();
-      this.toggleVisibility();
-    }
-  }
-
-  handleKeydown(event: KeyboardEvent): void {
-    if (event.key === 'Escape') {
-      event.preventDefault();
-      event.stopPropagation();
-      this.inputRef?.nativeElement.blur();
-    }
-
-    if (this.config().dropdown) {
-      this.handleDropdownKeyboardNavigation(event);
-    }
-
-    if (this.config().type === 'number' && !this.config().dropdown) {
-      this.handleNumberKeyboardNavigation(event);
-    }
-
-    if (this.config().type === 'account' || this.config().type === 'password') {
-      this.handlePasswordKeyboardNavigation(event);
-    }
-  }
-
-  // #endregion Keyboard Navigation
-}