carriera-intern 0.0.0

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

@@ -0,0 +1,1486 @@
+// 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
+}